關於vue-property-decorator的基礎使用實踐

2022-08-04 14:00:18

基本使用

基礎模板

和原來的vue單檔案元件寫法對比，template和css區域寫法不變，只是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資料定義

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

data中資料屬性在類中宣告為類屬性即可

生命週期勾點

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

所有生命週期勾點也可以直接宣告為類原型方法，但不能在範例本身上呼叫他們

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>

其他選項

對於其他選項，將他們傳遞給裝飾器函數

裝飾器函數

@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 {
  // 註冊勾點之後，類元件將他們實現為類原型方法
  beforeRouteEnter(to: any, from: any, next: any) {
    console.log("beforeRouteEnter");
    next();
  }
  beforeRouteLeave(to: any, from: any, next: any) {
    console.log("beforeRouteLeave");
    next();
  }
}
</script>

建議將註冊程式碼寫在單獨的檔案中，因為我們必須在任何元件定義之前註冊他們。import將勾點註冊的語句放在主檔案的頂部來確保執行順序

// 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裝飾器接收兩個引數：

propName：string，表示父元件傳遞過來的屬性名
options：Constructor | Constructor[] | PropOptions與@Prop的第一個引數一樣

@PropSync會生成一個新的計算屬性，所以@PropSync裡面的引數名不能與定義的範例屬性同名，因為prop是唯讀的

@PropSync與@Prop的區別是使用@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裝飾器接收一個可選引數，該引數是$emit的第一個引數，作為事件名。如果第一個引數為空，@Emit修飾的事件名作為第一個引數，$emit會將回撥函數的camelCase轉化為kebab-case
@Emit會將回撥函數的返回值作為 $emit的第二個引數。如果返回值是一個Promise物件，$emit會在Promise物件狀態變為resolved之後被觸發
@Emit回撥函數的引數，會放在返回值之後，作為$emit引數

父元件

<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接收一個可選的引數，表示元素或子元件的ref參照，如果不傳引數，則使用裝飾器後面的屬性名作為引數

<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接收兩個引數：

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指令，接收兩個引數：

event事件名

options和 Prop接收的引數型別一樣

父元件

<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
        }
    }
}