详解TypeScript+Vue 插件 vue-class-component的使用总结
首先下载
npminstallvue-class-componentvue-property-decorator--save-dev
一梭子直接干；
其次，咱来说说它们的区别与联系：
vue-property-decorator社区出品；vue-class-component官方出品
vue-class-component提供了Vue、Component等；
vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；
开发时正常引入vue-property-decorator就行
引入后写vue代码就是如此，
import{Component,Prop,Vue}from'vue-property-decorator'
@Component
exportdefaultclassAppextendsVue{
name:string='SimonZhang'
//computed
getMyName():string{
return`Mynameis${this.name}`
}
//methods
sayHello():void{
alert(`Hello${this.name}`)
}
mounted(){
this.sayHello();
}
}
相当于
exportdefault{
data(){
return{
name:'SimonZhang'
}
},
mounted(){
this.sayHello()
},
computed:{
MyName(){
return`Mynameis${this.name}`
}
},
methods:{
sayHello(){
alert(`Hello${this.name}`)
},
}
}
大佬都说爽的一批；
然鹅菜鸟我遇到问题一堆，以下做个积累总结：
1、写法问题：引入组件和接收父组件传过来的参数
@Component({
components:{
XXXX
},
props:{
mapFlag:Number
}
})
2、获取refs，在其后面加上asHTMLDivElement（不知道是不是这插件引起的，懒得管，直接干就是）
letlayoutList:any=this.$refs.layoutasHTMLDivElement
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。