在vue-cli中使用vue-property-decorator装饰器

安装

npm i -s vue-property-decorator

如果你的项目是安装了TS那么就可以直接使用，如果没有安装TS但是还是想用vue-property-decorator装饰器那么就还需要去配置一下了

使用vue-property-decorator要用babel转义,因为我们的项目中是没安装TS的是直接使用

在babel.config.js文件中

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    // vue-property-decorator 配置
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    // end vue-property-decorator 配置
  ]
}

在jsconfig.json文件中

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

那么就可以使用了那么下面我们对分别装饰器一一案例解答

@Component

@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives等未提供装饰器的选项

虽然也可以在@Component装饰器中声明computed，watch等，但并不推荐这么做，因为在访问this时，编译器会给出错误提示

import TSTest from './zj'
import { Component, Vue } from 'vue-property-decorator'
@Component({
  components: {
    TSTest // 组件名称
  }
})
class element_1 extends Vue {
  aa = true
  // 显示按钮
  handleShow () {
    console.log('我被点击了')
    this.aa = true
  }
}
export default element_1

注意：@Component({})这个是是放在class外面的为什么呢？我认为是因为在Component对象中的值是一些定义，和渲染的作用的方法，可以不用去继承Vue中的一些方法，例如:filters(过滤)，都是自己定义就好了，对吧，所以就写出来了

@Prop

当父组件有传:show的时候那么子组件就可以这样使用了

参数一：类型，默认值

注意是在TS中的写法好像show后面还有加！什么的但是不用TS的话就不需要，比如我就没用只是单单用这个装饰器

@Prop({ type: Boolean, default: true }) show

@PropSync

不知道大家对.sync修饰符的理解是这么样了，可以看我以前写的-sync

这里的show就是接收的值，当showTransmit值发生改变的时候，这个值就会传递给父组件中:show中的那个值

 @PropSync('show', { type: Boolean, default: true }) showTransmit

当然你要认为@PropSync难理解只用@Prop也可以就是要外加

参数二 ：改变的值这里为false，传给父组件

this.$emit('update:show', false);

@Watch

监听，这个简单好理解

参数一：监听的值

参数二：对象

  @Watch('showTransmit', { immediate: true, deep: true }) //这里不用this
  // immediate?:boolean  侦听开始之后是否立即调用该回调函数
  // deep 被侦听的对象的属性被改变时，是否调用该回调函数,也就是深度查询
  showTransmitWatch (newVal, oldVal) {
    console.log('改变后的值', newVal)
    console.log('改变前的值', oldVal)
  }

@Model

v-molder的装饰器,这个比较复杂，可以先看我以前写的vue的介绍 -- Model

HTML：这个是子组件中的input

<input type="text" :value="value1" @change="handleVal2($event)" />

JS

解析：

modelEvent是告诉父组件需要监听的事件，value1是父组件传过来的值

相当于

model:{
  prop: 'value1', // value1是子组件接收的值，传递给父组件的值是$emit('input','参数')中的参数的值，注意的是子组件不要直接拿父组件传过来的值去修改
  event: 'modelEvent' // js中那个父需要的监听事件的名称(用了v-molder语法糖会默认存在),$emit的事件参数(e.target.value)会自动成为父组件中传进来的值(由语法糖完成赋值)
}

@Model('modelEvent', { type: String, default: '我是默认值' }) value1

// 事件
  handleVal2 (e) {
    this.$emit('modelEvent', e.target.value)
  }

解析和注意事项：

解析：当input中的@change事件触发的时候（input中的内容发生改变），handleVal2()事件执行，给父组件监听事件modelEvent，和参数e.target.value，由于@Model中的设置那么这个参数会传给父组件中v-model中的值，同时父组件会跟新value1的值传给子组件

注意：value1的值只是父组件传给子组件的值，当父组件传的值不改变他是不会变的；外面不要直接去改变value1的值，因为有可能value1的值是对象的时候有引用类型的问题

@Mixins

class OperationStockControlInventoryEarlyWarning extends Mixins(ListMixin) {}

这样就继承了ListMixin文件中的东西，我再ListMixin文件有继承Vue那么OperationStockControlInventoryEarlyWarning文件也就继承了Vue，同时还有ListMixin文件中写的东西

class ListMixin extends Vue

@Inject/ @Provide

provide 和 inject 绑定并不是可响应的。这是刻意为之的。

父组件定义

用Vue.observable({})定义可以在变得响应

  /**
   * 提供祖先组件的实例
   */
  @Provide() provideParam = Vue.observable({
    isClickInquireBtn: false // 是否点击查询按钮
  });

子组件监听

@Inject({ type: Object, default: () => {} }) provideParam // 父组件对象


@Watch('provideParam', { deep: true })
  provideParamWatcher (val) {
    if (val.isClickInquireBtn) {
     //进行一些操作
    }
  }