Typescript中如何使用一些Vue的属性
vue-property-decorator 需要安装
npm i -S vue-property-decorator
@Component (组件)
import Vue from "vue";
import { Component} from "vue-property-decorator";
@Component
export default class Tabs extends Vue {
//内容
}
传入的组件
<template>
<Numberpad />
<Notes />
<Tags />
<Tabs />
</template>
<script lang="ts">
import Vue from "vue";
import Numberpad from "@/components/Money/Numberpad.vue";
import Notes from "@/components/Money/Notes.vue";
import Tags from "@/components/Money/Tags.vue";
import { Component } from "vue-property-decorator";
import Tabs from "@/components/Tabs.vue";
@Component({
components: { Numberpad, Notes, Tags, Tabs }
})
export default class Money extends Vue {
//内容
}
</script>
computed 的 getter & setter
@Component
export default class HelloDecorator extends Vue {
count: number = 123
// 获取计算属性
get total(): number {
return this.count + 1
}
// 设置计算属性
set total(param:number): void {
this.count = param
}
}
@Prop (父子组件传值)
父组件:
<Tabs :data-source="typeList" :value.sync="record.type" />
子组件:
import Vue from "vue";
import { Prop,Component } from "vue-property-decorator";
@Component
export default class Tabs extends Vue {
@Prop({ required: true, type: Array })
dataSource!: DataSourceItem[];
@Prop(String) readonly value!: string;
//内容
}
@Prop()里面需要写你传的参数的类型,在参数后面也要写
readonly 是让参数变为只读,不想让其修改
在传的参数后面加 !或者 ? 是为了告诉Ts 可能没有这个参数 ,防止初始化报错
@Watch(侦听数值变化)
import Vue from "vue";
import { Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {
//内容
}
@Watch('xxx')
onChildChanged(val: string, oldVal: string) {
//内容
}
}
@Watch()括号里面是被侦听的属性,括号下面就是发生变化时执行的函数,这函数有2个参数,一个是旧的值一个是新的值
@Emit
父组件:
<componentA @change='handelChange'></componentA>
import { Vue, Component } from 'vue-property-decorator';
@Component({
name: 'ParentCom',
components: {}
})
export default class ParentCom extends Vue {
handelChange(): void {
console.log('子组件改变了');
}
}
子组件:componentA
import { Vue, Component, Emit } from 'vue-property-decorator';
@Component({
name: 'ComponentB',
components: {}
})
export default class ComponentB extends Vue {
@Emit('change')
doChange() {
return '';
}
created() {
this.doChange();
}
}
mixins (混入)
这个需要用到vue-class-component
混入的组件
import Vue from "vue";
import Component from "vue-class-component"; // 这里最好用vue-class-component的Component
@Component
export class TagHelper extends Vue {
//内容
}
export default TagHelper;
被混入的组件
import Vue from "vue";
import { Component } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import TagHelper from "@/mixins/TagHelper"; //导入
@Component
export default class Tags extends mixins(TagHelper) {
//内容
}