Vue.js属性装饰器库vue-property-decorator文档
时间:2022-07-23
本文章向大家介绍Vue.js属性装饰器库vue-property-decorator文档,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
英文原文: https://github.com/kaorun343/vue-property-decorator/blob/master/README.md
此库完全依赖于vue-class-component, 所以请使用此库前, 先阅读它的文档
安装
npm i -S vue-property-decorator
使用
这是一些装饰器和一个Mixin函数
@Prop
@PropSync
@Model
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
-
@Component
(由 vue-class-component提供) -
Mixins
(名为mixins
的辅助函数, 由 vue-class-component提供)
查看Vuex的库
@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Prop(Number) readonly propA: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC: string | boolean | undefined
}
相当于
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
}
}
}
笔记:
如果你想要获取类型定义来设置每个prop值的type
属性, 你可以使用 reflect-metadata.
- 将
emitDecoratorMetadata
设置为true
. - 在引入
vue-property-decorator
之前 引入reflect-metadata
(只需引入一次reflect-metadata
.)
import 'reflect-metadata'
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
@Prop() age!: number
}
每个prop的默认值都要定义为与上面示例代码相同
不再 支持像@Prop() prop = 'default value'
这样定义每个默认
属性 .
@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器
import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@PropSync('name', { type: String }) syncedName!: string
}
is equivalent to
export default {
props: {
name: {
type: String
}
},
computed: {
syncedName: {
get() {
return this.name
},
set(value) {
this.$emit('update:name', value)
}
}
}
}
除此之外, 它就像除了将prop名称作为修饰器参数外的 @Prop
, 此外它还在后面创建了一个计算属性的 getter 和 setter. 这样你可以将它作为常规数据属性来与这个属性进行交互, 同时也使交互和在父组件上添加.sync
一样容易.
@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器
import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Model('change', { type: Boolean }) readonly checked!: boolean
}
等价于
export default {
model: {
prop: 'checked',
event: 'change'
},
prop: 'checked',
event: 'change'
props: {
checked: {
type: Boolean
}
}
}
@Model
属性也可以通过reflect-metadata
获取类型定义来设置type
属性.
@Watch(path: string, options: WatchOptions = {})装饰器
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {}
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) {}
@Watch('person')
onPersonChanged2(val: Person, oldVal: Person) {}
}
等价于
export default {
watch: {
child: [
{
handler: 'onChildChanged',
immediate: false,
deep: false
}
],
person: [
{
handler: 'onPersonChanged1',
immediate: true,
deep: true
},
{
handler: 'onPersonChanged2',
immediate: false,
deep: false
}
]
},
methods: {
onChildChanged(val, oldVal) {},
onPersonChanged1(val, oldVal) {},
onPersonChanged2(val, oldVal) {}
}
}
@Provide(key?: string | symbol)/
@Inject(options?: { from?: InjectKey, default?: any } | InjectKey) 装饰器
import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
const symbol = Symbol('baz')
@Component
export class MyComponent extends Vue {
@Inject() readonly foo!: string
@Inject('bar') readonly bar!: string
@Inject({ from: 'optional', default: 'default' }) readonly optional!: string
@Inject(symbol) readonly baz!: string
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
}
等价于
const symbol = Symbol('baz')
export const MyComponent = Vue.extend({
inject: {
foo: 'foo',
bar: 'bar',
optional: { from: 'optional', default: 'default' },
[symbol]: symbol
},
data() {
return {
foo: 'foo',
baz: 'bar'
}
},
provide() {
return {
foo: this.foo,
bar: this.baz
}
}
})
@ProvideReactive(key?: string | symbol)
/ @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey)
这两个修饰器是@Provide
和 @Inject
的响应式版本. 如果一个被提供的值被父组件修改, 子组件可以监听到这个修改.
const key = Symbol()
@Component
class ParentComponent extends Vue {
@ProvideReactive() one = 'value'
@ProvideReactive(key) two = 'value'
}
@Component
class ChildComponent extends Vue {
@InjectReactive() one!: string
@InjectReactive(key) two!: string
}
@Emit(event?: string) 装饰器
@Emit
$emit
装饰的函数, 它们的返回值后面跟着它们的原始参数. 如果返回值是一个Promise对象, 则会在触发前达到完成状态.
如果事件名称不提供 event
参数, 函数名将会被代替使用. 在这种情况下, 驼峰命名将被转换成短横线隔开式命名.
import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class YourComponent 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)
})
}
}
等价于
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)
})
}
}
}
@Ref(refKey?: string) 装饰器
import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/path/to/another-component.vue'
@Component
export default class YourComponent extends Vue {
@Ref() readonly anotherComponent!: AnotherComponent
@Ref('aButton') readonly button!: HTMLButtonElement
}
等价于
export default {
computed() {
anotherComponent: {
cache: false,
get() {
return this.$refs.anotherComponent as AnotherComponent
}
},
button: {
cache: false,
get() {
return this.$refs.aButton as HTMLButtonElement
}
}
}
}
- React Native使用原生组件
- Android ViewDragHelper及移动处理总结
- android 仿音悦台页面交互效果
- Webpack+Babel+React开发环境搭建
- Android Studio中 .gitignore配置
- Android系统服务之WindowManager整理
- gulp+webpack工具整合简介
- React Native之常用第三方库
- React Native和Android整合详解
- 强大的API测试工具Hitchhiker v0.9 基于UI的断言测试,回顾2017
- WEB前端架构(二)
- WEB前端架构(三)
- node.js基本工作原理及流程
- Github+Jekyll搭建个人博文网站
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 什么是高斯混合模型
- Python爬虫之数据提取-lxml模块
- 用Python读写文件的方法
- 反编译PyInstaller打包后的exe为py源码
- Qt多线程编程实战:MD5单项加密
- 高速上云/网络穿透/视频上云网关EasyNTS组网服务平台如何通过复制穿透结果实现外网到内网的访问?
- SpringBoot常用注解的简单理解
- Qt多线程编程之线程的同步和互斥
- TS 设计模式06 - 代理模式
- TS 设计模式07 - 观察者模式
- Java 语言基础(异常机制和File类,IO流,多线程,网络编程,反射机制)
- 前京东陌陌高级架构师的直播笔记分享(Java 内存问题排查和解决:内存概览,内存问题出现的原因,问题代码,案例分析)
- leet笔记-62.不同路径
- leet笔记-63.不同路径II
- 五分钟C语言实现数据结构 之 二叉树链式存储