装饰器
一、前言
在构建完项目之后，上一篇构建地址 ，打开src/components/HelloWorld.vue，将会发现写法已大有不同，如图
看到上面代码引入了vue-property-decorator 它是依赖于 vue-class-component
Install
npm i -S vue-property-decorator
//如果是直接用vuecli+ts构建的话,已经有依赖
二、装饰器
1、vue-property-decorator 装饰器有几个装饰器和1个功能（Mixin）：
- @Prop
- @PropSync
- @model
- @Watch
- @Provide
- @inject
- @ProvideReactive
- @InjectReactive
- @Emit
- @Ref
- @Component (由vue-class-component提供)
- Mixins (由vue-class-component提供的名为Mixins的助手函数)
2、vuex-class的装饰器
- @State
- @Getter
- @Action
- @Mutation
三、常用装饰器使用方式
1、@Component 和 @Prop 装饰器
@Component 装饰器是用以声明子组件
@Prop 装饰器是用以接收来自父组件的数据
1)父组件
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import {
Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Component({
components: {
HelloWorld,},
})
export default class Home extends Vue {
}
</script>
2）子组件
<template>
<div class="hello">
<h1>{
{
msg }}</h1>
</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>
//----------------------------------------------------
export default class HelloWorld extends Vue {
@Prop() private msg!: string; // ! 表示确定msg有值
@Prop(Number) readonly propA: number | undefined
@Prop({
default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC: string | boolean | undefined
}
// 上面的类似于☟
export default {
props: {
msg: {
type: String,
default: '',
},
propA: {
type: Number,
},
propB: {
type: String,
default: 'default value',
},
propC: {
type: [String, Boolean],
},
},
}
2、@Emit 装饰器
@Emit 装饰器是用以子组件触发父组件的自定义事件。
import {
Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
//子组件里面的定义
count = 0
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount() {
this.count = 0
}
@Emit()
returnValue() {
return 10
}
@Emit()
onInputChange(e) {
return e.target.value
}
@Emit()
promise() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
//-----------------------------------类似于
export default {
//子组件里面的定义
data() {
return {
count: 0,
}
},
methods: {
addToCount(n) {
this.count += n
this.$emit('add-to-count', n)
},
resetCount() {
this.count = 0
this.$emit('reset')
},
returnValue() {
this.$emit('return-value', 10)
},
onInputChange(e) {
this.$emit('on-input-change', e.target.value, e)
},
promise() {
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve(20)
}, 0)
})
promise.then((value) => {
this.$emit('promise', value)
})
},
},
}
3、@Model 装饰器
@Model 装饰器是用以组件上实现双向绑定
1)父组件
<template>
<div class="home">
<div>
<h1>@Model - 组件上实现双向绑定</h1>
<button type="primary" @click="onAlterFoo">父组件改变foo</button>
<HelloWorld v-model="foo"></HelloWorld>
</div>
</div>
</template>
<script lang="ts">
import {
Vue, Component, Model } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Component({
components: {
HelloWorld } })
export default class ModelComponent extends Vue {
private foo: boolean = true;
private onAlterFoo() {
this.foo = !this.foo;
}
}
</script>
2）子组件
<template>
<div>
<h1>{
{
checked}}</h1>
</div>
</template>
<script lang="ts">
import {
Vue, Component, Model, Prop } from 'vue-property-decorator';
@Component
export default class ModelComponent extends Vue {
@Model('change', {
type: Boolean }) private checked!: boolean;
}
</script>
//类似于
export default {
model: {
prop: 'checked',
event: 'change',
},
props: {
checked: {
type: Boolean,
},
},
}
4、@Watch 装饰器
@Watch 装饰器是用以监控数据是否改变。
<template>
<div>
<h1>@Watch用以监控数据是否改变</h1>
<input v-model="dataWatch" placeholder="请输入内容"></input>
<p>当前值：{
{
newVal }} 原来值：{
{
oldVal }}</p>
</div>
</template>
<script lang="ts">
import {
Component, Vue, Watch } from 'vue-property-decorator';
@Component
export default class datasWatch extends Vue {
private dataWatch: number | null = null;
private newVal : number | null = null;
private oldVal: number | null = null;
@Watch('dataWatch')
private onChanged(newVal : number, oldVal: number): void {
this.newVal = newVal ;
this.oldVal = oldVal;
}
}
</script>
5、@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/HelloWorld.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>
6、@PropSync
@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator
import { Vue, Component, PropSync } from ‘vue-property-decorator’
@Component
export default class YourComponent extends Vue {
@PropSync('name', {
type: String }) syncedName!: string
}
//-------------------is equivalent to
export default {
props: {
name: {
type: String,
},
},
computed: {
syncedName: {
get() {
return this.name
},
set(value) {
this.$emit('update:name', value)
},
},
},
}