详解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 相关文章推荐
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
js实现简单音乐播放器
Jun 30 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
解决vue中的无限循环问题
Jul 27 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
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
python 系统调用的实例详解
2017/07/11 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python匿名函数及应用示例
2019/04/09 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
应付会计岗位职责
2013/12/12 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏