- data 置頂
- computed 改為 get fun()
- 在@Emit裝飾器的函數(shù)會在運行之后觸發(fā)等同于其函數(shù)名(駝峰式會轉(zhuǎn)為橫杠式寫法)的事件, 并將其函數(shù)傳遞給$emit
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
this.emitTodo('world');
}
@Emit()
emitTodo(n: string){
console.log('hello');
}
//觸發(fā)特定的事件 帶參
@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進行開發(fā)時我們經(jīng)常要用到混合,結(jié)合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模塊,實現(xiàn)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
}
}
總結(jié): 兩種方式不同的是在定義mixins時如果沒有定義vue/type/vue模塊, 那么在混入的時候就要繼承該mixins; 如果定義vue/type/vue模塊,在混入時可以在@Component中mixins直接混入.
