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];
}
}
作者:Vigueur
链接:https://www.jianshu.com/p/03bfb12da141
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题: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 大屏的前提代码