使用 Vue + TypeScript 时项目中常用的装饰器

目录

• 一、@Component 装饰器
• 1）父组件
• 2）子组件
• 二、 @Emit 装饰器
• 1）父组件
• 2）子组件
• 三、 @Model 装饰器
• 1）父组件
• 2）子组件
• 四、 @Prop 装饰器
• 1）父组件
• 2）子组件
• 五、 @Provide 装饰器 和 @Inject 装饰器
• 1）父组件 @Provide
• 2）子组件 @Inject
• 六、 @Watch 装饰器

备注： 代码中 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>

---

参考文档 ：

• Vue Property Decorator