ts 版 vue 之 vue-property-decorator

今天我们来聊一聊 vue-property-decorator

官方链接:
https://www.npmjs.com/package...

来讲讲怎么用
vue-property-decorator 提供了装饰器,和 Mixin 功能。

装饰器

@Prop
父子组件通信传值的装饰器,跟未用 ts 版的 vue prop 组件传值一样

@Prop({ type: String, default: '' }) xxx!: string;

@PropSync
与 @prop 类似,用于组件传值。不同的是,
1.@PropSync 装饰器接收两个参数:
propName:父组件传递过来的属性名;
options:与@Prop的第一个参数一致;
2.@PropSync 会生成一个新的计算属性

// 子组件 
@PropSync('variate', { type: String, default: '' }) variate0!: string;  variate0 为子组件使用变量
// 父组件 
:variate.sync="variate1"  // variate1 为父组件所给变量

小结:
@PropSync 的工作方式与 @Prop 类似,除了它接受propName作为装饰器的参数之外,它还在幕后创建了一个计算的getter和setter。这样你就可以像使用常规的数据属性一样使用这个属性,同时也可以像在父组件中添加.sync修饰符一样简单。

@Component
在 ts 版本的vue中,@Component 装饰器替代了原来未用 ts 版本的 Component 页面引用组件 方式。

@Model
@Model装饰器允许我们在一个组件上自定义 v-model,接收两个参数:
event: string 事件名;
options: 与@Prop的第一个参数一致;

@Model('change', { type: Boolean }) readonly checked!: boolean

当父组件调用子组件去触发一个 change 事件并附带一个新的值的时候,这个值将会被更新到子组件

@ModelSync
@ModelSync装饰器可接受三个参数:
propName:类型名称;
event:事件名,string 类型;
options:与@Prop的第一个参数一致;

@ModelSync('checked', 'change', { type: Boolean })
  readonly checkedValue!: boolean

@Model @ModelSync 区别参考 @PropSync

@Watch
@Watch 装饰器接收两个参数:
1.path:被侦听的属性名;
2.options:可以包含两个属性
immediate?:boolean 侦听开始之后是否立即调用该回调函数;
deep?:boolean 被侦听的对象的属性被改变时,是否调用该回调函数;

@Watch('show', { immediate: true })
onShow(value) { // 回调函数
    // value 会去拿到 show 更新的值
    console.log('value', value)
}

@Emit
官方解释:
由@Emit $装饰的函数会发出它们的返回值,后面跟着它们的原始参数。如果返回值是一个promise,它会在发出之前被解析。
如果事件名没有通过event参数提供,则使用函数名。在这种情况下,camelCase的名称将被转换为kebab-case。

简言之,被 @Emit 装饰器修饰的函数方法,会立即调用想要 Emit 的方法。如果函数方法是异步,则异步发起前会被调用。如果 Emit 的参数名与当前的方法名一样,则 @Emit 无需传入参数,方法的驼峰命名会自动识别(转)为 短横线隔开式 命名(意思是 emit 定义的时候使用横杠命名,@Emit 可以使用对应的驼峰命名)。

用法:

@Emit() // emit 为 'add-to-count'
  addToCount(n: number) {
    this.count += n
  }
@Emit('reset')
  resetCount() {
    this.count = 0
  }

@Provide

provide:Object | () => Object
inject:Array | { [key: string]: string | Symbol | Object }

允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深

@ProvideReactive
@Provide和@Inject的响应式版本。如果父组件修改了所提供的值,那么子组件就可以捕捉到这个修改

Mixin

你可能感兴趣的