vue-property-decorator用法

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="es6">
    import Vue from 'vue';

    export default {
        data(){
            return {
                ValA: 'hello world',
                ValB: 1
            }
        }
    }
>

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

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

<script lang="es6">
    import Vue from 'vue';

    export default {
        computed: {
            ValA: function() {
                return 1;
            }
        }
    }
>

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

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

---

@Emit

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

<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);
            }
        }
    }
>

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

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

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

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

我们使用vue-property-decorator提供的@Prop可以将上面的代码改造为如下:

//定义要混合的类 mixins.ts
import Vue from 'vue';
import  Component  from 'vue-class-component';

@Component  // 一定要用Component修饰
export default class myMixins extends Vue {
    value: string = "Hello"
}

// 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'
}

混入

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
    }
  },
  // ...
})

-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等用到了再写.

作者：Homary
链接：https://www.jianshu.com/p/d8ed3aa76e9b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。