两种方式：extends写法（不带装饰器）----更接近vue语法importVuefrom'vue'importMainHeaderfrom'./header.vue'importMainContentfrom'./content.vue'interfaceUser{name:string,age:number}exportdefaultVue.extend({components:{MainHeader,MainContent},props:{testProps:{type:Objectas()=>User}},data(){return{show:false}},methods:{setShow(state:boolean):void{this.show=state}},computed:{num():number{returnthis.count},name:{//需要标明`this`才能参与操作的返回值类型get():string{returnthis.item.n},set(val:string){this.item.n=val}}}})vue-property-decorator(装饰器语法)----关闭类import{Vue,Component,Watch}from'vue-property-decorator'interfaceKeyValue{c:stringn:string}@Component({components:{MainHeader,MainContent}})exportdefaultclassTestextendsvue{//数据计数：number=1itemm:KeyValue={c:'',n:''}//computedgetnum():number{returnthis.count}getname():string{returnthis.item.n}//注意，这里不能标记返回值类型，就写void也不行setname(val:string){this.item.n=val}//watch@Watch('count')watchCount(newVal:number,oldVal:number):void{console.log(newVal)}@Watch('item.n')watchName(newVal:string,oldVal:string):void{console.log(newVal)}@Watch('item',{deep:true})watchItem(newVal:KeyValue,oldVal:KeyValue):void{console.log(newVal)}//方法reset():void{this.$emit('reset')},getKey():string{returnthis.item.c}}
