详解vue-property-decorator使用手册


Posted in Javascript onJuly 29, 2019

一,安装

npm i -s vue-property-decorator

二,用法

1,@Component(options:ComponentOptions = {})

@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives 等未提供装饰器的选项

虽然也可以在 @Component 装饰器中声明 computed,watch 等,但并不推荐这么做,因为在访问 this 时,编译器会给出错误提示

import { Vue, Component } from 'vue-property-decorator'

@Component({
 filters: {
 toFixed: (num: number, fix: number = 2) => {
 return num.toFixed(fix)
 }
 }
})
export default class MyComponent extends Vue {
 public list: number[] = [0, 1, 2, 3, 4]
 get evenList() {
 return this.list.filter((item: number) => item % 2 === 0)
 }
}

2,@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

@Prop 装饰器接收一个参数,这个参数可以有三种写法:

  • Constructor ,例如 String,Number,Boolean 等,指定 prop 的类型;
  • Constructor[] ,指定 prop 的可选类型;
  • PropOptions ,可以使用以下选项: type,default,required,validator 。
import { Vue, Component, Prop } from 'vue-property-decorator'
@Componentexport default class MyComponent extends Vue {
 @Prop(String) propA: string | undefined
 @Prop([String, Number]) propB!: string | number
 @Prop({
 type: String,
 default: 'abc'
 })
 propC!: string
}

等同于下面的 js 写法

export default {
 props: {
 propA: {
 type: Number
 },
 propB: {
 default: 'default value'
 },
 propC: {
 type: [String, Boolean]
 }
 }
}

注意:

  • 属性的ts类型后面需要加上 undefined 类型;或者在属性名后面加上!,表示 非null 和 非undefined
  • 的断言,否则编译器会给出错误提示;
  • 指定默认值必须使用上面例子中的写法,如果直接在属性名后面赋值,会重写这个属性,并且会报错。

3,@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})

  • @PropSync 装饰器与 @prop 用法类似,二者的区别在于:
  • @PropSync 装饰器接收两个参数: 

propName: string 表示父组件传递过来的属性名; 

options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致;

@PropSync 会生成一个新的计算属性。

import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
 @PropSync('propA', { type: String, default: 'abc' }) syncedPropA!: string
}

等同于下面的 js 写法

export default {
 props: {
 propA: {
 type: String,
 default: 'abc'
 }
 },
 computed: {
 syncedPropA: {
 get() {
 return this.propA
 },
 set(value) {
 this.$emit('update:propA', value)
 }
 }
 }
}

注意: @PropSync 需要配合父组件的 .sync 修饰符使用

4,@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})

@Model 装饰器允许我们在一个组件上自定义 v-model ,接收两个参数:

event: string 事件名。

options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致。

import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class MyInput extends Vue {
 @Model('change', { type: String, default: '123' }) value!: string
}

等同于下面的 js 写法

export default {
 model: {
 prop: 'value',
 event: 'change'
 },
 props: {
 value: {
 type: String,
 default: '123'
 }
 }
}

上面例子中指定的是 change 事件,所以我们还需要在 template 中加上相应的事件:

<template>
 <input
 type="text"
 :value="value"
 @change="$emit('change', $event.target.value)"
 />
</template>

对 自定义v-model 不太理解的同学,可以查看 自定义事件

5,@Watch(path: string, options: WatchOptions = {})

@Watch 装饰器接收两个参数:

path: string 被侦听的属性名;
options?: WatchOptions={} options 可以包含两个属性 :

immediate?:boolean 侦听开始之后是否立即调用该回调函数;

deep?:boolean 被侦听的对象的属性被改变时,是否调用该回调函数;

侦听开始,发生在 beforeCreate 勾子之后, created 勾子之前

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class MyInput extends Vue {
 @Watch('msg')
 onMsgChanged(newValue: string, oldValue: string) {}

 @Watch('arr', { immediate: true, deep: true })
 onArrChanged1(newValue: number[], oldValue: number[]) {}

 @Watch('arr')
 onArrChanged2(newValue: number[], oldValue: number[]) {}
}

等同于下面的 js 写法

export default {
 watch: {
 msg: [
 {
 handler: 'onMsgChanged',
 immediate: false,
 deep: false
 }
 ],
 arr: [
 {
 handler: 'onArrChanged1',
 immediate: true,
 deep: true
 },
 {
 handler: 'onArrChanged2',
 immediate: false,
 deep: false
 }
 ]
 },
 methods: {
 onMsgVhanged(newValue, oldValue) {},
 onArrChange1(newValue, oldValue) {},
 onArrChange2(newValue, oldValue) {}
 }
}

6,@Emit(event?: string)

  • @Emit 装饰器接收一个可选参数,该参数是 $Emit 的第一个参数,充当事件名。如果没有提供这个参数, $Emit 会将回调函数名的 camelCase 转为 kebab-case ,并将其作为事件名;
  • @Emit 会将回调函数的返回值作为第二个参数,如果返回值是一个 Promise 对象, $emit 会在 Promise 对象被标记为 resolved 之后触发;
  • @Emit 的回调函数的参数,会放在其返回值之后,一起被 $emit 当做参数使用。
import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
 count = 0
 @Emit()
 addToCount(n: number) {
 this.count += n
 }
 @Emit('reset')
 resetCount() {
 this.count = 0
 }
 @Emit()
 returnValue() {
 return 10
 }
 @Emit()
 onInputChange(e) {
 return e.target.value
 }
 @Emit()
 promise() {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve(20)
 }, 0)
 })
 }
}

等同于下面的 js 写法

export default {
 data() {
 return {
 count: 0
 }
 },
 methods: {
 addToCount(n) {
 this.count += n
 this.$emit('add-to-count', n)
 },
 resetCount() {
 this.count = 0
 this.$emit('reset')
 },
 returnValue() {
 this.$emit('return-value', 10)
 },
 onInputChange(e) {
 this.$emit('on-input-change', e.target.value, e)
 },
 promise() {
 const promise = new Promise(resolve => {
 setTimeout(() => {
  resolve(20)
 }, 0)
 })
 promise.then(value => {
 this.$emit('promise', value)
 })
 }
 }
}

7,@Ref(refKey?: string)

@Ref 装饰器接收一个可选参数,用来指向元素或子组件的引用信息。如果没有提供这个参数,会使用装饰器后面的属性名充当参数

import { Vue, Component, Ref } from 'vue-property-decorator'
import { Form } from 'element-ui'

@Componentexport default class MyComponent extends Vue {
 @Ref() readonly loginForm!: Form
 @Ref('changePasswordForm') readonly passwordForm!: Form

 public handleLogin() {
 this.loginForm.validate(valide => {
 if (valide) {
 // login...
 } else {
 // error tips
 }
 })
 }
}

等同于下面的 js 写法

export default {
 computed: {
 loginForm: {
 cache: false,
 get() {
 return this.$refs.loginForm
 }
 },
 passwordForm: {
 cache: false,
 get() {
 return this.$refs.changePasswordForm
 }
 }
 }
}

@Provide/@Inject 和 @ProvideReactive/@InhectReactive

由于平时基本不用到provide/inject选项,暂时先放着,以后有时间再研究

参考: https://github.com/kaorun343/...

总结

以上所述是小编给大家介绍的vue-property-decorator使用手册,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 #Javascript
微信小程序 WXML节点信息查询详解
Jul 29 #Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 #Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 #Javascript
vue.js 2.0实现简单分页效果
Jul 29 #Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 #Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 #Javascript
You might like
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
浅析php header 跳转
2013/06/17 PHP
php 数据结构之链表队列
2017/10/17 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python字典与json转换的方法总结
2020/12/28 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
优秀班主任申报材料
2014/12/16 职场文书
人口与计划生育责任书
2015/05/09 职场文书
狂人日记读书笔记
2015/06/30 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android