decorator
I. Introduction
After building the project, open the src/components/HelloWorld.vue in the previous article , and you will find that the writing method is quite different, as shown in the figure. You can see that the
above code introduces vue-property-decorator , which is dependent on vue-class-component
Install
npm i -S vue-property-decorator
//如果是直接用vuecli+ts构建的话,已经有依赖
2. Decorator
1. The vue-property-decorator decorator has several decorators and 1 function (Mixin):
- @Prop
- @PropSync
- @model
- @Watch
- @Provide
- @inject
- @ProvideReactive
- @InjectReactive
- @Emit
- @Ref
- @Component (provided by vue-class-component)
- Mixins (helper function named Mixins provided by vue-class-component )
2. Decorator of vuex-class
- @State
- @Getter
- @Action
- @Mutation
3. How to use common decorators
1. @Component and @Prop decorators
The @Component decorator is used to declare the child component
@Prop decorator is used to receive data from the parent component
1) Parent component
<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) Subcomponents
<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 decorator
The @Emit decorator is used by child components to trigger custom events of parent components.
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 decorator
The @Model decorator is used to implement two-way binding on the component
1) parent component
<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) Subcomponents
<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 decorator
The @Watch decorator is used to monitor whether the data has changed.
<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 decorator and @Inject decorator
@Provide decorator is used to inject data
@Inject decorator is used to get injected data
1) Parent component @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) Subcomponent @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)
},
},
},
}