vue-property-decorator用法

vue

如果想要在 vue2.0 中使用ts语法,需要引用 vue-property-decorator 这个第三方js库

此组件基本依赖于 vue-class-component 用于以下属性:

  • @Component (完全继承于vue-class-component)
  • @Emit
  • @Inject
  • @Provice
  • @Prop
  • @Watch
  • @Model

一.安装

npm install --save vue-property-decorator

二. ts页面中基本写法

import { Component, Vue, Inject } from "vue-property-decorator";

@Component({

components: {}

})

export default class SubjectList extends Vue {

dialogVisible: boolean = false;

storageVisible: boolean = false;

config: any = {

style: "table-form",

queryUrl: "Subject/GetAll",

isCustom: true,

params: {}

};

created() {

}

}

可以看到,这里的变量,与钩子都属于同级,会少些一些代码

三.下面讲几个用的较多的几个属性

1.组件引用

import { Component, Vue, Inject } from "vue-property-decorator";

import addSelectProduct from "../../coupon/components/addSelectProduct/addSelectProduct.component.vue";

@Component({

components: {

addSelectProduct,

}

})

export default class SubjectList extends Vue {

dialogVisible: boolean = false;

storageVisible: boolean = false;

config: any = {

style: "table-form",

queryUrl: "Subject/GetAll",

isCustom: true,

params: {}

};

created() {

}

}

2. watch 监听属性

import { Component, Vue, Inject,Watch } from "vue-property-decorator";

@Component({

components: {}

})

export default class SubjectList extends Vue {

dialogVisible: boolean = false;

storageVisible: boolean = false;

config: any = {

style: "table-form",

queryUrl: "Subject/GetAll",

isCustom: true,

params: {}

};

productList: any = []

// 监听属性

@Watch("dialogVisible")

onCountChanged(val: any, oldVal: any) {

console.log(val);

}// 监听属性

@Watch("productList",{ deep: true })

onCountChanged2(val: any, oldVal: any) {

console.log(val);

}

created() {

}

}

  1. 通过引用 Watch,  @watch()中第一个参数为: 监听的属性名, 第二个参数为可选对象(可用来监听对象,数组复杂类型)
  2. 当监听多个属性值时, 同法往下累加, 注意:定义监听函数的名字不能相同,如上例:onCountChanged 和 onCountChanged2

3.计算属性

import { Component, Vue, Inject } from "vue-property-decorator";

@Component({

components: {}

})

export default class SubjectList extends Vue {

dialogVisible: boolean = false;

storageVisible: boolean = false;

config: any = {

style: "table-form",

queryUrl: "Subject/GetAll",

isCustom: true,

params: {}

};

limitType : number = 0

// 计算属性

get shouldEdit() {

return !router.currentRoute.query.id;

}

get getButtonName() {

let type: any = {

1: '拼团',

2: '限时折扣',

};

return type[this.limitType];

}

created() {

}

}

  1. 使用时只需以 get 开头 + 方法 + 有返回值

4. 混入公共方法 mixins

import { Component, Vue, Inject } from "vue-property-decorator";

import PublicMethod from '@/plugins/mixins/provides/service/publicMethod';

@Component({

components: {},

mixins:[PublicMethod]

})

export default class SubjectList extends Vue {

dialogVisible: boolean = false;

storageVisible: boolean = false;

config: any = {

style: "table-form",

queryUrl: "Subject/GetAll",

isCustom: true,

params: {}

};

created() {

(<any>this).WxShare({ infoId : this.config.params.id , infoType : 7 });

}

}

分享一刻:

labuladong 的算法小抄 100 多道 LeetCode 算法题目的中文解释

以上是 vue-property-decorator用法 的全部内容, 来源链接: utcz.com/z/379337.html

回到顶部