vue-property-decorator用法介绍

前言

在Vue2.0中使用TypeScript语法时,需要引用 vue-property-decorator。

vue-property-decorator 完全依赖于vue-class-component,因此在使用vue-property-decorator之前可以先了解下vue-class-component。

Install

npm i -S vue-class-component
npm i -S vue-property-decorator 

用法

这里有几个装饰器和一个函数(Mixin):

  • @Prop
  • @PropSync
  • @Model
  • @ModelSync
  • @Watch
  • @Provide
  • @Inject
  • @ProvideReactive
  • @InjectReactive
  • @Emit
  • @Ref
  • @VModel
  • @Component (由 vue-class-component 提供)
  • Mixins (mixins 函数 由 vue-class-component 提供)

示例

@Component
即使没有组件也不能省略@Component,否则会报错。

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class extends Vue { 
}
</script>

组件引用

import { Component, Vue } from "vue-property-decorator";
import DemoComponent"./DemoComponent.vue";
({
  components: {
    DemoComponent
  }
})
export default class YourComponent extends Vue { 
}

@Prop 父子组件之间值的传递

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined 
}
</script>

相当于

export default {
  props: {
    propA: {
      type: Number,
    } 
  },
}

如果你不想设置每个prop的type类型,你可以使用reflect-metadata.

npm install reflect-metadata -D
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import 'reflect-metadata'

@Component
export default class extends Vue {
  @Prop() age!: number
}
</script>

@PropSync
相当于在父组件中添加.sync装饰器, 使子组件也可以更新prop的值。具体查看.sync 修饰符

<script lang="ts">
import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class extends Vue {
  @PropSync('name', { type: String }) syncedName!: string; // 用来实现组件的双向绑定
 
  changeName(): void {
    this.syncedName = '子组件修改过后的syncedName!'; // 更改syncedName会更改父组件的name 
  }
}
</script>

@Watch 监听属性

import { Vue, Component, Watch } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}
 
  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}
}

相当于:

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      } 
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {} 
  },
}

@Emit

import { Vue, Component, Emit } from 'vue-property-decorator'
 

export default class YourComponent extends Vue {
  ()
  addToCount(n: number) { 
  }
 
  ('reset')
  resetCount() {
    this.count = 0
  } 
}

相当于:

export default {
  methods: {
    addToCount(n) { 
      this.$emit('add-to-count', n)
    },
    resetCount() { 
      this.$emit('reset')
    } 
}

mixins 混入公共方法

import { Component, Vue } from "vue-property-decorator";
import mixinsMethod from '@/plugins/mixins.js';

@Component({
  components: {},
  mixins:[mixinsMethod]
})
export default class YourComponent extends Vue { 
}

计算属性
使用时只需 get 开头 + 方法 + 返回值

import { Component, Vue } from "vue-property-decorator";
@Component 
export default class YourComponent extends Vue {
  type:  number = 0
  // 计算属性
  get getName() {
    let type: any = {
      1: 'Taobao',
      2: 'Pdd',
     };
     return type[this.type];
  } 
}

vue-property-decorator - npm
vue-class-component



作者:Vigueur
链接:https://www.jianshu.com/p/03bfb12da141
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

posted on   漫思  阅读(3357)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
历史上的今天:
2019-09-12 大屏的前提代码

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示