vue-property-decorator用法

vue-property-decorator这个库彻底依赖于vue-class-component，因此在使用这个库以前请先阅读它, 无论啥反正都是装饰器而已

 

vue-property-decorator

这个组件彻底依赖于vue-class-component.它具有如下几个属性:

• @Component (彻底继承于vue-class-component)
• @Emit
• @Inject
• @Provice
• @Prop
• @Watch
• @Model
• Mixins (在vue-class-component中定义);

使用

当咱们在vue单文件中使用TypeScript时,引入vue-property-decorator以后,script中的标签就变为这样:

<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ ValA: string = "hello world"; ValB: number = 1; } </script> 

等同于

<script lang="es6"> import Vue from 'vue'; export default { data(){ return { ValA: 'hello world', ValB: 1 } } } </script> 

• 总结: 对于data里的变量对顶,咱们能够直接按ts定义类变量的写法写就能够

那么若是是计算属性呢? 这就要用到getter了.

<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ get ValA(){ return 1; } } </script> 

等同于

<script lang="es6"> import Vue from 'vue'; export default { computed: { ValA: function() { return 1; } } } </script> 

• 总结: 对于Vue中的计算属性,咱们只须要将该计算属性名定义为一个函数,并在函数前加上get关键字便可.

本来Vue中的computed里的每一个计算属性都变成了在前缀添加get的函数.

---

@Emit

关于Vue中的事件的监听与触发,Vue提供了两个函数$emit和$on.那么在vue-property-decorator中如何使用呢?
这就须要用到vue-property-decorator提供的@Emit属性.

<script lang="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ mounted(){ this.$on('emit-todo', function(n) { console.log(n) }) this.emitTodo('world'); } @Emit() emitTodo(n: string){ console.log('hello'); } } </script> 

运行上面的代码会打印 'hello' 'world', 为何呢? 让咱们来看看它等同于什么

<script lang="es6"> import Vue from 'vue'; export default { mounted(){ this.$on('emit-todo', function(n) { console.log(n) }) this.emitTodo('world'); }, methods: { emitTodo(n){ console.log('hello'); this.$emit('emit-todo', n); } } } </script> 

能够看到,在@Emit装饰器的函数会在运行以后触发等同于其函数名(驼峰式会转为横杠式写法)的事件, 并将其函数传递给$emit.
若是咱们想触发特定的事件呢,好比在emitTodo下触发reset事件:

<script lang="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ @Emit('reset') emitTodo(n: string){ } } </script> 

咱们只须要给装饰器@Emit传递一个事件名参数reset,这样函数emitTodo运行以后就会触发reset事件.

• 总结:在Vue中咱们是使用$emit触发事件,使用vue-property-decorator时,能够借助@Emit装饰器来实现.@Emit修饰的函数所接受的参数会在运行以后触发事件的时候传递过去.
  @Emit触发事件有两种写法

1. @Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
2. @Emit(name: string),里面传递一个字符串,该字符串为要触发的事件名.

---

@Watch

咱们能够利用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化.

在Vue中监听器的使用以下:

export default{ watch: { 'child': this.onChangeValue // 这种写法默认 `immediate`和`deep`为`false` , 'person': { handler: 'onChangeValue', immediate: true, deep: true } }, methods: { onChangeValue(newVal, oldVal){ // todo... } } } 

那么咱们如何使用@Watch装饰器来改造它呢?

import {Vue, Component, Watch} from 'vue-property-decorator'; @Watch('child') onChangeValue(newVal: string, oldVal: string){ // todo... } @Watch('person', {immediate: true, deep: true}) onChangeValue(newVal: Person, oldVal: Person){ // todo... } 

• 总结: @Watch使用很是简单,接受第一个参数为要监听的属性名 第二个属性为可选对象.@Watch所装饰的函数即监听到属性变化以后的操做.

---

@Prop

咱们在使用Vue时有时会遇到子组件接收父组件传递来的参数.咱们须要定义Prop属性.

好比子组件从父组件接收三个属性propA,propB,propC.

• propA类型为Number
• propB默认值为default value
• propC类型为String或者Boolean

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

咱们使用vue-property-decorator提供的@Prop能够将上面的代码改造为以下:

<script lang="ts"> import {Vue, Component, Prop} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ @Prop(Number) propA!: number; @Prop({default: 'default value'}) propB!: string; @propC([String, Boolean]) propC: string | boolean; } </script> 

这里 !和可选参数?是相反的, !告诉TypeScript我这里必定有值.

• 总结: @Prop接受一个参数能够是类型变量或者对象或者数组.@Prop接受的类型好比Number是JavaScript的类型,以后定义的属性类型则是TypeScript的类型.

---

Mixins

在使用Vue进行开发时咱们常常要用到混合,结合TypeScript以后咱们有两种mixins的方法.

一种是vue-class-component提供的.

//定义要混合的类 mixins.ts import Vue from 'vue'; import Component from 'vue-class-component'; @Component // 必定要用Component修饰 export default class myMixins extends Vue { value: string = "Hello" } 

// 引入 import Component {mixins} from 'vue-class-component'; import myMixins from 'mixins.ts'; @Component export class myComponent extends mixins(myMixins) { // 直接extends myMinxins 也能够正常运行 created(){ console.log(this.value) // => Hello } } 

第二种方式是在@Component中混入.

咱们改造一下mixins.ts,定义vue/type/vue模块,实现Vue接口

// mixins.ts import { Vue, Component } from 'vue-property-decorator'; declare module 'vue/types/vue' { interface Vue { value: string; } } @Component export default class myMixins extends Vue { value: string = 'Hello' } 

混入

import { Vue, Component, Prop } from 'vue-property-decorator'; import myMixins from '@static/js/mixins'; @Component({ mixins: [myMixins] }) export default class myComponent extends Vue{ created(){ console.log(this.value) // => Hello } } 

• 总结: 两种方式不一样的是在定义mixins时若是没有定义vue/type/vue模块, 那么在混入的时候就要继承该mixins; 若是定义vue/type/vue模块,在混入时能够在@Component中mixins直接混入.

---

@Model

Vue组件提供model: {prop?: string, event?: string}让咱们能够定制prop和event.
默认状况下，一个组件上的v-model 会把 value用做 prop且把 input用做 event，可是一些输入类型好比单选框和复选框按钮可能想使用 value prop来达到不一样的目的。使用model选项能够回避这些状况产生的冲突。

• 下面是Vue官网的例子

Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { // this allows using the `value` prop for a different purpose value: String, // use `checked` as the prop which take the place of `value` checked: { type: Number, default: 0 } }, // ... }) 

<my-checkbox v-model="foo" value="some value"></my-checkbox> 

上述代码至关于：

<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"> </my-checkbox> 

即foo双向绑定的是组件的checke, 触发双向绑定数值的事件是change

使用vue-property-decorator提供的@Model改造上面的例子.

import { Vue, Component, Model} from 'vue-property-decorator'; @Component export class myCheck extends Vue{ @Model ('change', {type: Boolean}) checked!: boolean; }