VUE+ts

先简单的总结一下ts

接口  规范数据类型的  (规范对象函数类等是什么类型)

泛型  有时候数据类型不确定  (通常是因为返回的类型)  需要泛型来对不同的地方返回不同的类型

装饰器  他就是一个函数  用来改变下面的函数类等

@lang  与@lang()  这两种都是装饰器 但是第二种会传参 针对装饰器的不同传递的参数功能也不同 但是确实是真的传参进去了

也就是说 先执行一边装饰器和下面的方法(装饰器下面的方法会作为一个参数 在装饰器中被改造)

@lang 装饰器 可能是这样样子的

function lang(target){}

@lang() 就是这个样子的

function lang(option?:any){

        return function(){}                        return 必须

}

接下来看看vue中是的实际应用 

两款插件 vue-class-component与vue-property-decorator

vue-class-component是vue官方的插件

而vue-property-decorator是社区的人写的插件

区别  vue-property-decorator完全基于vue-class-component但是在他基础之上又增加了

@Prop @Watch@Inject@Emit等等装饰器

所以接收父向子组件传递数据

@Component   改变类  转化为vue的配置项结构 同时也可以在这里引入组件

import aaa from './zujian.vue';

@Component({

  components: {

    aaa,

  },

})

@Prop

@Prop({ default: false, type: Boolean }) radio!: boolean;

子组件向父组件传值

@Emit

abc(){return }

如果Emit 里面没有参数这时候会触发父组件函数名的事件也就是abc  但是如果是驼峰式命名getAbc 事件名会成为get-abc

参数是函数的返回值

@Watch() 参数监听那个变量

执行方法 也有两个参数 newVal 与oldval



需要注意的是这时候引入组件 有时要加上.vue否则会说找不到module

有时候会说ts文件才可以写private 全删了再重新写一遍(没改什么感觉是vscode 卡住了似的)

 

 

你可能感兴趣的:(VUE+ts)