乐趣区

关于vue.js:ts-版-vue-之-vuepropertydecorator

jiezi

明天咱们来聊一聊 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<string> | {[key: string]: string | Symbol | Object }

容许一个先人组件向其所有子孙后代注入一个依赖，不管组件档次有多深

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

Mixin

退出移动版