• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请


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

参考文档 :

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vuecli创建typescript项目发布时间:2022-07-18
下一篇:
vuetypescript父子组件间值的传递发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap