vue-property-decorator

data 置顶
computed 改为 get fun()
在@Emit装饰器的函数会在运行之后触发等同于其函数名(驼峰式会转为横杠式写法)的事件, 并将其函数传递给$emit

  mounted(){
    this.$on('emit-todo', function(n) {
      console.log(n)
    })
    this.emitTodo('world');
  }

  @Emit()
  emitTodo(n: string){
    console.log('hello');
  }
//触发特定的事件  带参
  @Emit('reset')
  emitTodo(n: string){
  }

4 @Watch

@Watch('child')
onChangeValue(newVal: string, oldVal: string){
    // todo...
}
@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){
    // todo...
}

5 @Props

 @Prop(Number) propA!: number;
 @Prop({default: 'default value'}) propB!: string;
 @propC([String, Boolean]) propC: string | boolean;

! 是必带属性 ?是可选

6 @Model

7 Mixin

Mixins
在使用Vue进行开发时我们经常要用到混合,结合TypeScript之后我们有两种mixins的方法.

一种是vue-class-component提供的.

//定义要混合的类 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component';

@Component // 一定要用Component修饰
export default class myMixins extends Vue {
value: string = "Hello"
}
// 引入
import Component {mixins} from 'vue-class-component';
import myMixins from 'mixins.ts';

@Component
export class myComponent extends mixins(myMixins) {
// 直接extends myMinxins 也可以正常运行
created(){
console.log(this.value) // => Hello
}
}
第二种方式是在@Component中混入.

我们改造一下mixins.ts,定义vue/type/vue模块,实现Vue接口

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';

declare module 'vue/types/vue' {
interface Vue {
value: string;
}
}

@Component
export default class myMixins extends Vue {
value: string = 'Hello'
}
混入

import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins';

@Component({
mixins: [myMixins]
})
export default class myComponent extends Vue{
created(){
console.log(this.value) // => Hello
}
}
总结: 两种方式不同的是在定义mixins时如果没有定义vue/type/vue模块, 那么在混入的时候就要继承该mixins; 如果定义vue/type/vue模块,在混入时可以在@Component中mixins直接混入.

vue-property-decorator

推荐阅读更多精彩内容