vue-property-decorator 用法

prop

import { Prop } from "vue-property-decorator";
@Prop({default: {}}) info!: Object;
// 默认值  keyName  是否必传  类型
@Prop() keywords;

Mixins

why: 我们有一对不同的组件，它们除了功能相似以外，没有其他共同点：它们看起来不一样，用法不一样，但是逻辑一样。

how: 提取逻辑并创建可以被重用的项

import { Component, Vue } from "vue-property-decorator";
@Component
export class listMixin extends Vue {
    // dosomething 逻辑相同的
    num = 1 as number;
    add () {
        this.num ++;
        console.log("add")
    }
}

单个组件引入

import { listMixin } from './mixin'
@Component({
    mixins: [listMixin]
})
export default class SearchResult extends Vue {
    name = 'searchResult'
    mounted () {
        console.log(111111111111)
    }
}

@Provice和@Inject

// provide是js的语法 em...不想写了
  provide() {
    return {
      getIsCollapseAside: () => {return this.isCollapse}
    }
  }
  @Inject() private getIsCollapseAside;
  get isCollapseAside(){
      return this.getIsCollapseAside();
  }