Typescript基于vue cli3中一些常见的写法

最新推荐文章于 2025-10-31 14:39:17 发布

原创最新推荐文章于 2025-10-31 14:39:17 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#typescript+vue #typescript

本文详细介绍了Vue-property-decorator库中的各种装饰器用法，包括Component、Provide、Emit、Prop、Watch、Model等，展示了如何利用这些装饰器简化Vue组件的开发过程。

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>