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

51次阅读

共计 1816 个字符,预计需要花费 5 分钟才能阅读完成。

明天咱们来聊一聊 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

正文完
 0