脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-property-decorator使用手册

详解vue-property-decorator使用手册

 更新时间：2019年07月29日 16:09:04   作者：似曾相识  
这篇文章主要介绍了vue-property-decorator使用手册，文中较详细的给大家介绍了他们的用法，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

一，安装

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使用手册,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • vuejs前后端数据交互之从后端请求数据的实例

    vuejs前后端数据交互之从后端请求数据的实例

    今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue 计算属性 computed

    Vue 计算属性 computed

    这篇文章主要介绍了Vue 计算属性 computed，一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性，下面我们来看看具体实例,需要的朋友可以参考一下
    2021-10-10
  • vue中tinymce的使用实例详解

    vue中tinymce的使用实例详解

    TinyMCE Vue是TinyMCE官方发布的Vue组件，可以更轻松地在Vue应用程序中使用TinyMCE，这篇文章主要介绍了vue中tinymce的使用,需要的朋友可以参考下
    2022-11-11
  • Vue操作数组的几种常用方法小结

    Vue操作数组的几种常用方法小结

    本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下
    2023-09-09
  • vue3使用ref和reactive的示例详解

    vue3使用ref和reactive的示例详解

    Vue 3引入了两个新的API,ref和reactive,用于创建响应式对象,这两个方法都位于Vue.prototype上,因此可以在组件实例中直接使用,本文给大家介绍vue3使用ref和reactive的示例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Vue3中的组件数据懒加载

    Vue3中的组件数据懒加载

    这篇文章主要介绍了Vue3中的组件数据懒加载问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 关于vue打包时的publicPath就是打包后静态资源的路径问题

    关于vue打包时的publicPath就是打包后静态资源的路径问题

    这篇文章主要介绍了vue打包时的publicPath，就是打包后静态资源的路径,本文通过三种情况分析给大家详细介绍，需要的朋友可以参考下
    2022-07-07
  • 详解Vue使用命令行搭建单页面应用

    详解Vue使用命令行搭建单页面应用

    本篇文章主要介绍了详解Vue使用命令行搭建单页面应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • el-table 树形数据 tree-props 多层级使用避坑

    el-table 树形数据 tree-props 多层级使用避坑

    本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • Vue SPA 如何解决浏览器缓存问题

    Vue SPA 如何解决浏览器缓存问题

    这篇文章主要介绍了Vue SPA 如何解决浏览器缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08

最新评论