1、安装vue-property-decorator
npm i -D vue-proporty-decorator
看看页面代码展示:
将文件拖到此处,或点击上传
vue-proporty-decorator它具备以下几个装饰器和功能:
@Component
@Prop
@PropSync
@Model
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
1、@Component(options:ComponentOptions = {})
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等
registerHooks:
除了上面介绍的将beforeRouteLeave放在Component中之外,还可以全局注册,就是registerHooks
2、@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
@Prop装饰器接收一个参数,这个参数可以有三种写法:
Constructor,例如String,Number,Boolean等,指定 prop 的类型;
Constructor[],指定 prop 的可选类型;
PropOptions,可以使用以下选项:type,default,required,validator。
注意:属性的ts类型后面需要加上undefined类型;或者在属性名后面加上!,表示非null 和 非undefined
的断言,否则编译器会给出错误提示;
// 父组件:
// 子组件:
name: {{name}} | age: {{age}} | sex: {{sex}}
//@Prop的用法
@Prop({
type: Boolean, // 父组件传递给子组件的数据类型
required: false, // 是否必填
default: false // 默认值, 如果传入的是 Object,则要 default: ()=>({}) 参数为函数
}) collapsed !: boolean
@Prop()private datas!: any
感叹号是非null和非undefined的类型断言,所以上面的写法就是对datas这个属性进行非空断言
3、@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
@PropSync装饰器与@prop用法类似,二者的区别在于:
@PropSync 装饰器接收两个参数:
propName: string 表示父组件传递过来的属性名;
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致;
@PropSync 会生成一个新的计算属性。
注意,使用PropSync的时候是要在父组件配合.sync使用的
// 父组件
父组件
like:{{like}}
// 子组件
子组件:
syncedlike:{{ syncedlike }}
4、@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
@Model装饰器允许我们在一个组件上自定义v-model,接收两个参数:
event: string 事件名。
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致。
注意,有看不懂的,可以去看下vue官网文档, https://cn.vuejs.org/v2/api/#model
// 父组件
父组件 app : {{fooTs}}
// 子组件
子组件:
5,@Watch(path: string, options: WatchOptions = {})
@Watch 装饰器接收两个参数:
path: string 被侦听的属性名;
options?: WatchOptions={} options可以包含两个属性 :
immediate?:boolean 侦听开始之后是否立即调用该回调函数;
deep?:boolean 被侦听的对象的属性被改变时,是否调用该回调函数;
发生在beforeCreate勾子之后,created勾子之前
child:{{child}}
6,@Emit(event?: string)
@Emit 装饰器接收一个可选参数,该参数是Emit会将回调函数名的camelCase转为kebab-case,并将其作为事件名;
@Emit会将回调函数的返回值作为第二个参数,如果返回值是一个Promise对象,emit当做参数使用。
// 父组件
点击emit获取子组件的名字
姓名:{{emitData.name}}
// 子组件
子组件:
姓名:{{person.name}}
年龄:{{person.age}}
性别:{{person.sex}}
7,@Ref(refKey?: string)
@Ref 装饰器接收一个可选参数,用来指向元素或子组件的引用信息。如果没有提供这个参数,会使用装饰器后面的属性名充当参数
总结:
1、写法问题:引入组件和接收父组件传过来的参数
@Component({
components: {
XXXX
},
props: {
mapFlag: Number
}
})
2、获取refs,在其后面加上as HTMLDivElement(不知道是不是这插件引起的,懒得管,直接干就是)
let layoutList:any = this.$refs.layout as HTMLDivElement
或
let fieldCalculate:any = (this as any).$refs.fieldCalculate
3、ts文件 公用方法导出
const xxx = (value: any, type: string) => {
...
}
export { xxx, xxx, xxx, xxx }
4、引入装饰器,使用方式@Watch
import { Component, Prop, Watch, Emit } from 'vue-property-decorator'
5、引用插件。在shims-vue.d.ts 文件中声明,再在组件中引用
declare module 'vuedraggable' {
const vuedraggable: any;
export default vuedraggable;
}
6、@Watch使用
// 监听formula 其变化则显示验证公式按钮
@Watch('formula', { deep: true, immediate: true }) formulaWatch (newVal:string, oldVal:string) {
if (newVal !== oldVal) {
this.grammarSuccess = true
this.errMsgFlag = false
this.checkFormulaSuccess = false
}
}
7、计算属性方法写法(跟@watch一样,当成方法写就行;加一个关键字get)
get aTagDatasFcomput () {
// computed计算属性, 过滤出visible为true的对象来渲染,
因为当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中
return this.aTagDatasF.filter(item => item.visible)
}
8、@Prop的用法
@Prop({
type: Boolean, // 父组件传递给子组件的数据类型
required: false, // 是否必填
default: false // 默认值, 如果传入的是 Object,则要 default: ()=>({}) 参数为函数
}) collapsed !: boolean
@Prop()private datas!: any
感叹号是非null和非undefined的类型断言,所以上面的写法就是对datas这个属性进行非空断言
9、ts设置html的fontSize
let docEl = document.documentElement as HTMLDivElement // 加上 as HTMLDivElement