详解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 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
微信小程序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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
php实现单链表的实例代码
2013/03/22 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
Node.js文件操作详解
2014/08/16 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
青蓝工程实施方案
2014/03/27 职场文书
质量承诺书怎么写
2014/05/24 职场文书
食品安全演讲稿
2014/09/01 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
教师工作总结范文2014
2014/11/10 职场文书
博物馆观后感
2015/06/05 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
MySQL存储过程及语法详解
2022/08/05 MySQL