vue-class-component 和 vue-property-decorator

vue類組件

 

 

1.什么是vue的類組件：通過class來繼承vue來寫組件，可以寫入一些裝飾類等用法

 

2.安裝使用 vue-class-component 插件，是vue官方推薦

// 安裝

npm install --save vue vue-class-component


// 在組件中使用

import Vue from 'vue'
import Component, { createDecorator } from 'vue-class-component'

// 注冊額外的鈎子，路由導航鈎子

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

// 裝飾器
@Component({

  // 接受父組件傳過來的值  
  props: {

    propMessage: {
        
        type: String
    }
  },

  // 組件的注冊

  components: {


  }    
})


export default class HelloWorld extends Vue {


    // 定義初始化數據

    msg = '你好類組件'


    /*
    
        注意：如果初始化屬性的值為undefined，則該數據不會是響應式的

        vue是不會檢測到的，解決方法就是：賦值為null或者在data中定義

        使用
    
    */

    data () {

        return {

            gender: undefined
        }
    }
        
    
    fn () {
    
        console.log('我是一個普通的方法')
    }
    
    // 生命周期函數

    created () {

        console.log(this.msg)    // 你好類組件

        this.fn()    // 來調用
    },

    mounted () {},

    // 計算屬性
    
    // 獲取計算屬性
    get userInfo () {

        return this.msg
    }
    
    // 設置計算屬性
    set userInfo (value) {

        this.msg = value + '我修改的'
    } 
    
    // 導航路由
    beforeRouteEnter(to, from, next) {
        console.log('beforeRouteEnter')
        next()
    }

    // createDecorator：用來自定義裝飾器的，具體用法請看文檔

    // 文檔地址：https://class-component.vuejs.org/guide/custom-decorators.html
}



/*

    然而我們在開發中並不會使用vue-class-component這個插件

    
    而是使用 vue-property-decorator 插件，他是vue社區推薦的


    接下來我們在開發中都是使用他，他特別依賴於vue-class-component

    插件，是他的一個超集合，想要學習接着看吧
    
*/

 

2.安裝使用 vue-property-decorator 插件，是vue社區推薦

 

// 首先安裝

npm i -S vue-property-decorator

// 先來看一下他的裝飾器

@Component (完全繼承於vue-class-component)

// vue自定義事件
@Emit

// vue多級組件傳值
@Inject
@Provice

// 介紹父組件的數據
@Prop

// 監視器的使用
@Watch

@Model

// 混入的使用
Mixins (在vue-class-component中定義)

// 獲取元素或者組件的實例
@Ref

 

 

3.@Prop使用

// 子組件home下的vue組件

import { Vue, Component, Prop} from 'vue-property-decorator'

@Component({
  components: {

  },
  filters: {
    time (value) {
      return 1
    }
  }
})

export default class MyComponent extends Vue {

    // 接收父組件的參數形式一

    
    @Prop(String) msg


    // 形式二


    @Prop([String, Number]) msg



    // 形式三


    @Prop({

        type: String,

        required: true,

        default: '我是默認的數據'

    }) msg



    created () {
    
        console.log(this.msg)
    }
}



// 父組件

<template>

    <Home :msg="msg"  />

</template>

<script>

// 引入子組件
import Home from '@/views/Home'
        
export default {

   data () {

        msg: '我是父組件的數據'
    }
}

</script>

 

4.@Model使用

 

// 配合父組件的v-model使用

// 父組件

<template>

    <div id="app">

        <Home v-model="name"  />

        <span>{{ name }}</span>
    </div>

</template>

<script>

import Home from '@/views/Home'

export default {

    data () {

        return {

            name: '小美'
        }
    }
}

</script>




// 子組件使用的是render函數渲染

<script>

import { Vue,  Component, Prop, Model } from 'vue-property-decorator'

@Component({
  components: {

  },
  filters: {
    time (value) {
      return 1
    }
  }
})


export default class MyComponent extends Vue {

    // value是父組件穿過的name值，類型是String，默認值是default
    @Model('input', { type: String, default: '123' }) value
    
    created () {
            
        console.log(this.value)
    }

    render () {

        return (

            <input onInput={ event => {

                // 通過自定義事件返回到父組件
              this.$emit('input', event.target.value)
            } } type="text" />密碼
        )
    }
}


</script>

  

5.methods中方法定義使用

// 類組件中

<script>
import {Vue, Component, Prop} from 'vue-property-decorator'

@Component({
  components: {

  },
  filters: {
    time (value) {
      return 1
    }
  }
})

export default class MyComponent extends Vue {

    // 普通方法直接在類中定義即可

    // 初始化數據

    count = 1

    add () {

        this.count++
    }

    render () {

        return (
            
            <button onClick={ this.add }>count++</button>

            // 如果add函數中需要使用到事件對象的話，可以向下面這樣使用

            <button onClick={ val => {

                this.add()
            } }>count++<button>
        )
    }
}

</script>

 

6.@Watch使用

// 類組件中

<script>

import { Vue, Component } from 'vue-property-decorator'

@Component({

  components: {

  },
  filters: {
    time (value) {
      return 1
    }
  }

})


export default class MyComponent extends Vue {

    gender = '男'

    genderChange () {

        this.gender = "女"
    }


    // 監視數據的變化

    @Watch('gender ')
    handlerGender (newVal, oldVal) {

        console.log(newVal, oldVal)
    }
    

    // 深度監視和初始化即調用此時指定第二個參數

    @Watch('gender', { immediate: true, deep: true })
    handlerGender (newVal, oldVal) {

        console.log(newVal, oldVal)
    }


    render () {
        
        return {

            <button onClick={ this.add }>改變gender數據</button>
        }
    }

}

</script>

 

7.@Emit使用

// 類組件中

<script>

import {Vue, Component, Emit } from 'vue-property-decorator'

@Component({

  components: {

  },
  filters: {
    time (value) {
      return 1
    }
  }

})


export default class MyComponent extends Vue {
    
    name = "我是一個帥哥"

    // 發布事件
    @Emit('reset')
    addToName () {
        return this.name
     }
      

    mounted () {

      this.$on('reset', (n) => {

           // 此時的參數就是上面的 return this.name的值 
          console.log(n)
      })
    }

    render () {

        return (

            // 點擊之后發布事件
            <button onClick={ val => {
                
                this.addToName()

            } }></button>
        )
    }
}


</script>

 

 8.@Ref使用

// 類組件使用

<script>

import { Component, Ref } from 'vue-property-decorator'

@Component({

  components: {

  },

  filters: {
    time (value) {
      return 1
    }
  }

})


export default class MyComponent extends Vue {
    
    // 如果構造函數不穿參數，默認就使用后面的變量
    @Ref('div') div

    
    created () {

        // 拿到div元素
        console.log(this.div)
    }

    render () {

        return (

            <div ref="div">我是一個親愛的div</div>

        )
    }
}

</script>

 

9.計算屬性的使用

// 類組件使用

<script>

import { Vue, Component } from 'vue-property-decorator'

@Component({

  components: {

  },

  filters: {
    time (value) {
      return 1
    }
  }

})


export default class MyComponent extends Vue {

    gender = '男'

    get genderData () {

        return this.gender 
    }


    created () {

        console.log(this.genderData())
    }

    // 設置計算屬性的值

    set genderData (val) {

        this.gender = val
    }
}

</script>

 

10.Mixins混入的使用

 

// mixins目錄下的index.js，混入的js文件

import { Vue, Component } from 'vue-property-decorator'

@Component({

})

export class User extends Vue {

  // 需要混入的數據  
  change = '要改變的數據'
  title = '標題'
}


// 在home組件中使用

<script>

import { Component, Mixins } from 'vue-property-decorator'

// 需要混入的js文件
import { User } from '@/mixins/index'

@Component({

  components: {

  },

  filters: {
    time (value) {
      return 1
    }
  }

})

// Mixins構造函數中混入
export default class MyComponent extends Mixins(User) {

    
    created () {

        console.log(this.change)

        console.log(this.title)
    }
}


</script>