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>