GitLab

更多用法，在实际操作后，都可以自行补充上来。

warning:
 由于装饰器模板上，vue-class-component对data做了包裹，导致this.$options.data()没有返回我们想要的值
 如果是一些需要表单重置功能的组件，可以通过以下方法来实现
 export default class TestComp extends Vue {
  private name = '老李';
  private age = null;
  // hock
  created() {
    this.defaultData = deepCopy(this.$data);
  }
  // methods
  handleInput(key, value) {
     this[key]= value;
  }
  // 当name、age发生了变化，想重置时，
  initData(){
    Object.assign(this.$data, this.defaultData);
  }
}

 ☆☆☆☆☆☆☆☆不推荐使用 @Emit 装饰器，按照原有写法更清晰

provide/inject 是固定写法，不需要新增其他使用方式

import { Component,  Vue, Watch, Provide, Inject, Prop, Emit } from 'vue-property-decorator';
import HelloWorld from './HelloWorld.vue';
import { def } from '@/common/utils/ways';
/* vue-property-decorator依赖于Component 必须在使用装饰器语法是引入并使用Component，否则会导致无法监听到data数据变化 */
@Component({
  components: {
    HelloWorld, // 声明子组件的引用
  },
  filters: {
    addWorld: (value: string) => `${value} world`,
  },
  directives: {
    demoSimplify(el, binding, vnode) {
      // do stuff
    },
  }
})
export default class MyComponent extends Vue {
  /* Provide/Inject */
  ☆☆☆☆☆☆☆☆☆里面的key值硬性要求为  页面相关多词组+ . + key  => 'contractEbkDialog.formData'
  // 事件传递
    主页面
      @Provide('contractEbkDialogEvents.validated')
      validated(rest?: string | Array<string>) {
        this.$nextTick(function() {
          if (rest) {
            this.$refs.formData.validateField(rest);
          } else {
            this.$refs.formData.validate();
          }
        });
      }
    子页面
      @Inject('contractEbkDialogEvents.validated') validated!: Function
      ...
      this.validated()
  // 数据传递-单向数据绑定（更推荐直接使用双向数据绑定） vue-property-decorator  8.2.2版本
    主页面
      @componens({
        //inject: [], // 此处仅 8.4.2版本 需要加，目前仅location-ims/location-activity 项目为 8.4.2版本
      })
      @ProvideReactive('orderDetailDialog.detail') detail: any = null;
      ...
      this.detail = {
        name: 'jay'
      }
    子页面
      @InjectReactive('orderDetailDialog.detail') detail!: any
      ...
      console.log(this.detail)
  // 数据传递-双向数据绑定（推荐）vue-property-decorator  8.2.2版本
    主页面
      @componens({
        //inject: [], // 此处仅 8.4.2版本 需要加，目前仅location-ims/location-activity 项目为 8.4.2版本
      })
      @ProvideReactive('orderDetailDialog') orderDetailDialog: any = null;
      ...
      private detail: any = null
      created() {
        this.orderDetailDialog = def(this, ['detail']);
      }
      ...
      this.detail = {
        name: 'jay'
      }
    子页面
      @InjectReactive('orderDetailDialog') orderDetailDialog!: any
      ...
      console.log(this.orderDetailDialog.detail)
  /* Provide/Inject end */

  /* 数据 start */
  private msg = 'Hello';
  private count = 0;
  private value = 'lorry'
  /* 数据 end */

  /* $ref定义 start， 写法 1 */
  public $refs!: {
    helloworld: HelloWorld
  }
  /* $ref定义 start，写法 2 */
  @Ref() readonly helloworld!: HelloWorld

  /* 单项数据 start */
  @Prop({
    type: Number,
    validator: (value) => {
      return value > 100;
    },
    required: true
  }) private count!: string // !表示有值, 否则 ts 会告警未初始化
  /* 单项数据 end */

  /* 可变更的双向数据 start */
  // 注意@PropSync 里的参数不能与定义的实例属性同名, 因为还是那个原理, props 是只读的.
  @PropSync('count') private innerCount!: number 
  /* 可变更的双向数据 end */

  /* v-model start */
  @Model('change', { type: [String, Number] }) private value!: string|number
  /* v-model end */

  /* watch监听 start */
  @Watch('person', {
    deep: true,
  })
  private firstNameChange(person: number, oldPerson:number) {
    console.log(`count change from${oldName.name.first}to: ${oldName.name.}`);
  }
  /* watch监听 end */
  
  /* computed计算 start */
  get maxConfigMix() {
    return Object.assign({},
      this.$attrs,
      {
        value: this.value[this.maxKey]
      }
    );
  }
  /* computed计算 end */

  /* 事件emit start */
  @Emit('button-click')
  private emitChange() {
    this.count += 1;
    return this.count;
  }
  /* 事件emit end */

  /* 生命钩子 start */
  // ....
  private created() {}
  private mounted() {
    console.log(this.$refs.helloworld);
  }
  // ...
  /* 生命钩子 end */

}

mixin 写法

import Component, { mixins } from 'vue-class-component'
import mix from './mixin' // some mixin

@Component
export class MyComp extends mixins(mix) {
  created () {
    // do sth...
  }
}