vue-class-component使用Mixins

vue-class-component提供了mixinshelper函数,以类样式的方式使用mixins。通过使用mixins帮助程序,TypeScript可以推断mixin类型并在组件类型上继承它们。

声明mixin的示例:

// mixin.js
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare a mixin as the same style as components.
@Component
export default class MyMixin extends Vue {
  mixinValue = 'Hello'
}

使用mixin的示例:

import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.js'

// Use `mixins` helper function instead of `Vue`.
// `mixins` can receive any number of arguments.
@Component
export class MyComp extends mixins(MyMixin) {
  created () {
    console.log(this.mixinValue) // -> Hello
  }
}

 

posted @ 2019-09-05 17:24  simple-love  阅读(1638)  评论(0编辑  收藏  举报