vue-property-decorator的装饰器的使用
@Component
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({ //Component组件装饰器，用于增加一些全局的配置，比如过滤器filters
components: {
//components里面放一些全局的组件，引入子组件后写在这，跟vue中的components一样
},
})
export default class Home extends Vue {
}
</script>
@Provide
<script lang="ts">
import { Provide, Vue } from 'vue-property-decorator';
export default class Home extends Vue {
@Provide() private name: string = 'weipingping'; //定制属性，替换data，正常情况下直接使用
//private 修饰的属性或者方法是私有的，只在此类中有效
//public 修饰的属性或者方法是公有的，任何组件都可以访问到
//protected 修饰的属性或者方法是私有的，但它的子组件可以访问到
}
</script>
@Emit
<script lang="ts">
import { Emit, Vue } from 'vue-property-decorator';
export default class Home extends Vue {
//Emit 给父组件传值
//方式一
private add(): void{
@Emit("add","传递的参数")
}
//方式二
@Emit ("add","传递的参数")
private add(): void{
console.log("这个方法运行完成后触发Emit")
}
}
</script>
@Prop接收父组件传递的数据（）里面定义接收的类型
<script lang="ts">
import { Prop, Vue } from 'vue-property-decorator';
export default class Home extends Vue {
@Prop(Object) private list!: any;//！表示这个值必须传，不然报错，强制性。。
}
</script>
@Watch监听属性
@Model接收父组件双向数据绑定的数据
@Inject注入 正常情况下使用Provide
计算属性
<template>
<div class="home">
{{ allNum }}
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator';
@Component({
components: {
},
})
export default class Home extends Vue {
@Provide() private one: number = 5;
@Provide() private two: number = 6;
//计算属性直接前面加get就可以了
get allNum() {
return this.one + this.two;
}
}
</script>
Vuex
//store.ts
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
flag: false,
},
mutations: {
changeState(state) {
state.flag = !state.flag;
},
},
actions: {
},
});
//组件中
<template>
<div class="home">
<button @click="changeState">点击改变状态</button>
{{ flag }}
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator';
import { mapState, mapMutations } from 'vuex';
@Component({
components: {
},
computed: {
...mapState(['flag']),
},
methods: {
...mapMutations(['changeState']),
},
})
export default class Home extends Vue {
//
}
</script>
