目錄
備注： 代碼中 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>
- 參考文檔 ：