關于vue-property-decorator的基礎使用實踐
更新時間：2022年08月04日 09:43:37 作者：風如也
這篇文章主要介紹了關于vue-property-decorator的基礎使用實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-property-decorator幫助我們讓vue支持TypeScript的寫法，這個庫是基于 vue-class-component庫封裝實現的。
注：以下環(huán)境為 vue2.x + typescript
基本使用
基礎模板
和原來的vue單文件組件寫法對比，template和css區(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數據定義
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將鉤子注冊的語句放在主文件的頂部來確保執(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裝飾器接收兩個參數：
propName：string，表示父組件傳遞過來的屬性名options：Constructor | Constructor[] | PropOptions與@Prop的第一個參數一樣
@PropSync會生成一個新的計算屬性，所以@PropSync里面的參數名不能與定義的實例屬性同名，因為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裝飾器接收一個可選參數，該參數是$emit的第一個參數，作為事件名。如果第一個參數為空，@Emit修飾的事件名作為第一個參數，$emit會將回調函數的camelCase轉化為kebab-case
- @Emit會將回調函數的返回值作為 $emit的第二個參數。如果返回值是一個Promise對象，$emit會在Promise對象狀態(tài)變?yōu)閞esolved之后被觸發(fā)
- @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
? ? ? ? }
? ? }
}其他
以下裝飾器后面使用到會及時補充，如果有不清楚的可以查看文檔
@ModelSync@Provide@Inject@ProvideReactive@InjectReactive@VModelMixins
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
解決vue-cli創(chuàng)建項目的loader問題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項目的loader問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看看吧2018-03-03
Ant?Design?of?Vue的樹形控件Tree的使用及說明
這篇文章主要介紹了Ant?Design?of?Vue的樹形控件Tree的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue是一個輕量級、漸進式的Javascript框架,如果想要要開發(fā)全新的Vue項目,建議項目構建工具vue-cli,下面這篇文章主要給大家介紹了關于VSCode創(chuàng)建Vue項目的完整步驟,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue3動態(tài)修改打包后的請求路徑,需要我們創(chuàng)建一個靜態(tài)資源里的外部文件來實現，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
在Vue中,$router.push方法默認不支持在新窗口中打開頁面,但通過結合window.open方法和$router.resolve方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-09-09
Vue使用pdf.js和docx-preview實現docx和pdf的在線預覽
這篇文章主要為大家詳細介紹了在Vue中使用pdf.js和docx-preview實現docx和pdf的在線預覽的相關知識,文中的示例代碼講解詳細,需要的可以參考下2025-03-03
這篇文章主要介紹了Vue中使用matomo進行訪問流量統(tǒng)計的實現,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
詳解windows下vue-cli及webpack 構建網站(四) 路由vue-router的使用
本篇文章主要介紹了windows下vue-cli及webpack 構建網站(四) 路由vue-router的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)
這篇文章主要介紹了vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了vue搜索和vue模糊搜索，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05