使用 Vue + TypeScript 时项目中常用的装饰器
目录
备注： 代码中 el-* 的标签是 ElementUI 的组件。
一、@Component 装饰器
@Component 装饰器是用以声明子组件。
1）父组件
<template>
<div>
<h1>@Component - 声明（引入）组件</h1>
<ComponentSub></ComponentSub>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ComponentSub from '@/components/decorator/other_decorator/ComponentSub.vue';
@Component({ components: { ComponentSub } })
export default class Home extends Vue { }
</script>
2）子组件
<template>
<p>这是子组件</p>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class ComponentSub extends Vue { }
</script>
二、 @Emit 装饰器
@Emit 装饰器是用以子组件触发父组件的自定义事件。
1）父组件
<template>
<div>
<h1>@Emit - 子组件触发父组件的自定义事件</h1>
<EmitSub @bind-no-arg="welcomeNoArg" @welcome="sayHi"></EmitSub>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import EmitSub from '@/components/decorator/property_decorator/EmitSub.vue';
@Component({ components: { EmitSub } })
export default class Prop extends Vue {
private welcomeNoArg(): void {
console.log(111);
}
private sayHi(arg: string[]): void {
console.log(arg);
alert(arg[0]);
}
}
</script>
2）子组件
<template>
<div>
<el-row>
<el-button @click="bindNoArg">无返回值</el-button>
<el-button @click="bindHaveArg">无返回值</el-button>
</el-row>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Emit() private bindNoArg(): void {
console.log('bindNoArg');
}
@Emit('welcome') private bindHaveArg(): string[] {
console.log('bindHaveArg');
return ['Yes', 'No', 'Maybe'];
}
}
</script>
三、 @Model 装饰器
@Model 装饰器是用以组件上实现双向绑定。
1）父组件
<template>
<div>
<h1>@Model - 组件上实现双向绑定</h1>
<el-button type="primary" @click="onAlterFoo">父组件改变foo</el-button>
<ModelSub v-model="foo"></ModelSub>
</div>
</template>
<script lang="ts">
import { Vue, Component, Model } from 'vue-property-decorator';
import ModelSub from '@/components/decorator/property_decorator/ModelSub.vue';
@Component({ components: { ModelSub } })
export default class ModelComponent extends Vue {
private foo: boolean = true;
private onAlterFoo() {
this.foo = !this.foo;
}
}
</script>
2）子组件
<template>
<div>
<input type="checkbox" v-bind:checked="checked"
v-on:change="$emit('balabala', $event.target.checked)"
>
</div>
</template>
<script lang="ts">
import { Vue, Component, Model, Prop } from 'vue-property-decorator';
@Component
export default class ModelComponent extends Vue {
@Model('balabala', { type: Boolean }) private checked!: boolean;
}
</script>
四、 @Prop 装饰器
@Prop 装饰器是用以接收来自父组件的数据。
1）父组件
<template>
<div>
<h1>@Prop - 接收来自父组件的数据</h1>
<PropSub msg="中野三玖"></PropSub>
</div>
</template>
<script lang="ts">
import { Component, Vue, Emit, Inject } from 'vue-property-decorator';
import PropSub from '@/components/decorator/property_decorator/PropSub.vue';
@Component({ components: { PropSub } })
export default class Prop extends Vue { }
</script>
2）子组件
<template>
<div>
这是子组件收到的值：{{ msg }}
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string; // ! 表示确定msg有值
}
</script>
五、 @Provide 装饰器 和 @Inject 装饰器
@Provide 装饰器是用以注入数据，@Inject 装饰器是用以获取注入的数据。
1）父组件 @Provide
<template>
<div>
<h1>@Provide/@Inject - 接收来自父组件的数据</h1>
父组件通过依赖注入赋予的值是：{{ foo }}
<ProvideInject></ProvideInject>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator';
import ProvideInject from '@/components/decorator/property_decorator/ProvideInject.vue';
@Component({ components: { ProvideInject } })
export default class Home extends Vue {
@Provide('bar') private foo = '111';
}
</script>
2）子组件 @Inject
<template>
<div>
子组件通过依赖注入接收的值是：{{ bar }}
</div>
</template>
<script lang="ts">
import { Component, Vue, Inject } from 'vue-property-decorator';
@Component
export default class ProvideInject extends Vue {
@Inject() private readonly bar!: string;
}
</script>
六、 @Watch 装饰器
@Watch 装饰器是用以监控数据是否改变。
<template>
<div>
<h1>@Watch - 监控数据是否改变</h1>
<el-input v-model="child" placeholder="请输入内容"></el-input>
<p>当前值：{{ val }} 原来值：{{ oldVal }}</p>
</div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Watch } from 'vue-property-decorator';
@Component
export default class ProvideInject extends Vue {
private child: number | null = null;
private val: number | null = null;
private oldVal: number | null = null;
@Watch('child')
private onChildChanged(val: number, oldVal: number): void {
this.val = val;
this.oldVal = oldVal;
}
}
</script>
- 参考文档 ：
