欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-property-decorator用法详解

程序员文章站 2022-07-06 18:10:07
vue-property-decorator 这个组件完全依赖于vue-class-component.它具备以下几个属性: @component (完全继承于vue-...

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触发事件有两种写法

  • @emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
  • @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;
}

总结, @model()接收两个参数, 第一个是event值, 第二个是prop的类型说明, 与@prop类似, 这里的类型要用js的. 后面在接着是prop和在ts下的类型说明.

暂时常用的就这几个,还有@provice和@inject等用到了再写.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。