目录
备注： 代码中 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>
- 参考文档 ：