關(guān)于vue-property-decorator的基礎(chǔ)使用實踐

更新時間：2022年08月04日 09:43:37 作者：風如也

這篇文章主要介紹了關(guān)于vue-property-decorator的基礎(chǔ)使用實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

基本使用

基礎(chǔ)模板

和原來的vue單文件組件寫法對比，template和css區(qū)域?qū)懛ú蛔?，只是script部分的寫法有變化。

<!--HelloWorld.vue-->
<template>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
}
</script>
<style scoped>
</style>

lang="ts"表示當前支持語言為Typescript
@Component表示當前類為vue組件
export default class HelloWorld extends Vue表示導出當前繼承vue的類

data數(shù)據(jù)定義

export default class HelloWorld extends Vue {
? ? msg: string = "";
}

data中數(shù)據(jù)屬性在類中聲明為類屬性即可

生命周期鉤子

export default class HelloWorld extends Vue {
? ? created(): void {
? ? }
}

所有生命周期鉤子也可以直接聲明為類原型方法，但不能在實例本身上調(diào)用他們

method方法

export default class HelloWorld extends Vue {
? ? initData(): void {
? ? }
}

method里面的方法在類中直接聲明為類原型方法即可

計算屬性

計算屬性聲明為類屬性 getter/setter

<template>
? <div class="about">
? ? <input type="text" v-model="name">
? </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class AboutView extends Vue {
? firsrName = "Hello";
? lastName = "Kity";
? // getter
? get name() {
? ? return this.firsrName + " " + this.lastName;
? }
? // setter
? set name(value) {
? ? const splitted = value.split(' ');
? ? this.firsrName = splitted[0];
? ? this.lastName = splitted[1] || "";
? }
}
</script>

其他選項

對于其他選項，將他們傳遞給裝飾器函數(shù)

裝飾器函數(shù)

@Component

@Component可以接收一個對象，注冊子組件

import { Component, Vue, Ref } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';
@Component({
? components: {
? ? HelloWorld,
? },
})
export default class HomeView extends Vue {
}

如果我們使用Vue Router時，希望類組件解析他們提供的鉤子，這種情況下，可以使用 Component.registerHooks注冊這些鉤子

<template>
? <div class="about">
? ? <h1>This is an about page</h1>
? ? <input type="text" v-model="name">
? </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// 注冊路由鉤子
Component.registerHooks([
? "beforeRouteEnter",
? "beforeRouteLeave"
])
@Component
export default class AboutView extends Vue {
? // 注冊鉤子之后，類組件將他們實現(xiàn)為類原型方法
? beforeRouteEnter(to: any, from: any, next: any) {
? ? console.log("beforeRouteEnter");
? ? next();
? }
? beforeRouteLeave(to: any, from: any, next: any) {
? ? console.log("beforeRouteLeave");
? ? next();
? }
}
</script>

建議將注冊代碼寫在單獨的文件中，因為我們必須在任何組件定義之前注冊他們。import將鉤子注冊的語句放在主文件的頂部來確保執(zhí)行順序

// class-component-hooks.ts
import { Component } from 'vue-property-decorator'
// Register the router hooks with their names
Component.registerHooks([
? 'beforeRouteEnter',
? 'beforeRouteLeave'
])

// main.ts
import './class-component-hooks'
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
? render: h => h(App)
}).$mount('#app')

@Prop

@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

Constructor，指定 prop 的類型，例如 String，Number，Boolean等
Constructor[]，指定 prop的可選類型
PropOptions，指定 type，default，required，validator等選項

屬性的 ts 類型后面需要設置初始類型 undefined，或者在屬性名后面加上!，表示非null和非undefined的斷言，否則編譯器給出錯誤提示

父組件

// Test.vue
<template>
? <div class="test">
? ? <test-children :name="myname" :age="age" :sex="sex" />
? </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TestChildren from "@/components/TestChildren.vue";
@Component({
? components: {
? ? TestChildren
? }
})
export default class Test extends Vue {
? private myname = "Kitty";
? private age = 18;
? sex = "female";
}
</script>

子組件

// TestChildren.vue
<template>
? <div class="test-children">
? ? <p>myname: {{ name }}</p>
? ? <p>age: {{ age }}</p>
? ? <p>sex: {{ sex }}</p>
? </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class TestChildren extends Vue {
? @Prop(String)
? readonly name!: string;
? @Prop({ default: 22, type: Number })
? private age!: number;
? @Prop([String, Boolean])
? sex!: string | boolean;
}
</script>

@PropSync

@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})

@PropSync裝飾器接收兩個參數(shù)：

propName：string，表示父組件傳遞過來的屬性名
options：Constructor | Constructor[] | PropOptions與@Prop的第一個參數(shù)一樣

@PropSync會生成一個新的計算屬性，所以@PropSync里面的參數(shù)名不能與定義的實例屬性同名，因為prop是只讀的

@PropSync與@Prop的區(qū)別是使用@PropSync，子組件可以對 peops 進行更改，并同步到父組件。

使用 @PropSync需要在父組件綁定props時使用 .sync修飾符

父組件

<template>
? <div class="test">
? ? <p>gender: {{ gender }}</p>
? ? <test-children :gender.sync="gender" />
? </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TestChildren from "@/components/TestChildren.vue";
@Component({
? components: {
? ? TestChildren
? }
})
export default class Test extends Vue {
? gender = "喝啤酒";
}
</script>

子組件

<template>
? <div class="test-children">
? ? <p>myGender: {{ myGender }}</p>
? ? <button @click="updateMyGender">更換myGender</button>
? </div>
</template>

<script lang="ts">
import { Component, Vue, PropSync } from "vue-property-decorator";
@Component
export default class TestChildren extends Vue {
? @PropSync("gender", { type: String })
? myGender!: string;
? updateMyGender() {
? ? this.myGender = "吃香蕉";
? }
}
</script>

@Emit

@Emit(event?: string)

@Emit裝飾器接收一個可選參數(shù)，該參數(shù)是$emit的第一個參數(shù)，作為事件名。如果第一個參數(shù)為空，@Emit修飾的事件名作為第一個參數(shù)，$emit會將回調(diào)函數(shù)的camelCase轉(zhuǎn)化為kebab-case
@Emit會將回調(diào)函數(shù)的返回值作為 $emit的第二個參數(shù)。如果返回值是一個Promise對象，$emit會在Promise對象狀態(tài)變?yōu)閞esolved之后被觸發(fā)
@Emit回調(diào)函數(shù)的參數(shù)，會放在返回值之后，作為$emit參數(shù)

父組件

<template>
? <div class="test">
? ? <p>name：{{ name }}</p>
? ? <test-children @change-name="changeName" />
? </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TestChildren from "@/components/TestChildren.vue";
@Component({
? components: {
? ? TestChildren
? }
})
export default class Test extends Vue {
? name = "";
? changeName(val: string): void {
? ? this.name = val;
? }
}
</script>

子組件

<template>
? <div class="test-children">
? ? <input type="text" v-model="value">
? ? <button @click="changeName">修改父組件的name</button>
? </div>
</template>

<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";
@Component
export default class TestChildren extends Vue {
? value = "";
? @Emit()
? changeName(): string {
? ? return this.value;
? }
}
</script>

// 上例@Emit相當于
changeName() {
? ? this.$emit("changeName", this.value);
}

@Emit()
changeName(arg: string): string {
? ? return this.value;
}
// 相當于
changeName(arg) {
? ? this.$emit("changeName", this.value, arg);
}

@Emit("change-name")
change(arg: string): string {
? ? return this.value;
}
// 相當于
change(arg) {
? ? this.$emit("changeName", this.value, arg);
}

@Emit()
changeName(): Promise<number> {
? ? return new Promise((resolve) => {
? ? ? ? setTimeout(() => {
? ? ? ? ? ? resolve(20)
? ? ? ? }, 2000)
? ? })
}
// 相當于
changeName() {
? ? const promise = new Promise((resolve) => {
? ? ? ? setTimeout(() => {
? ? ? ? ? ? resolve(20)
? ? ? ? }, 2000)
? ? })
? ? promise.then(val => {
? ? ?? ?this.$emit("changeName", this.val)
? ? })
}

@Ref

@Ref(refKey?: string)

@Ref接收一個可選的參數(shù)，表示元素或子組件的ref引用，如果不傳參數(shù)，則使用裝飾器后面的屬性名作為參數(shù)

<template>
? ? <HelloWorld ref="helloComp"/>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';
@Component({
? components: {
? ? HelloWorld,
? },
})
export default class HomeView extends Vue {
? @Ref("helloComp") readonly helloWorld!: HelloWorld;
? mounted(): void {
? ? console.log(this.helloWorld);
? }
}
</script>

<template>
?? ?<HelloWorld ref="helloWorld">
</template>

<script lang="ts">
...
export default class HomeView extends Vue {
? @Ref() readonly helloWorld!: HelloWorld;
}
</script>

@Watch

@Watch(path: string, options: WatchOptions = {})

@Watch接收兩個參數(shù)：

path: string表示被偵聽的屬性名稱
options包含immediate?: boolean和 deep: boolean屬性

@Watch("value")
? ? valueWatch(newV: string, oldV: string) {
? ? console.log(newV, oldV);
}
@Watch("name", { immediate: true, deep: true })
? ? nameWatch(newV: string, oldV: string) {
? ? console.log(newV, oldV);
}

@Model

@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})

@Model允許我們在組件上自定義v-model指令，接收兩個參數(shù)：

event事件名

options和 Prop接收的參數(shù)類型一樣

父組件

<template>
? <div class="test">
? ? <p>name：{{ name }}</p>
? ? <test-children v-model="name" />
? </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TestChildren from "@/components/TestChildren.vue";
@Component({
? components: {
? ? TestChildren
? }
})
export default class Test extends Vue {
? name = "";
}
</script>

子組件

<template>
? <div class="test-children">
? ? <input type="text" :value="value" @input="inputHandle($event)">
? </div>
</template>

<script lang="ts">
import { Component, Vue, Model, Emit } from "vue-property-decorator";
@Component
export default class TestChildren extends Vue {
? @Model("update", { type: String })
? readonly value!: string;
? @Emit("update")
? inputHandle(e: any): void {
? ? return e.target.value;
? }
}
</script>

解釋

export default class TestChildren extends Vue {
? @Model("update", { type: String })
? readonly value!: string;
}
// 相當于
export default {
? ? model: {
? ? ? ? prop: 'value',
? ? ? ? event: 'update'
? ? },
? ? props: {
? ? ? ? value: {
? ? ? ? ? ? type: String
? ? ? ? }
? ? }
}