一文秒懂vue-property-decorator

更新時(shí)間：2022年08月25日 15:22:25 作者：榴蓮不好吃

這篇文章主要介紹了vue-property-decorator的簡單知識,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

我們來看下頁面上代碼展示:
1.@Component(options:ComponentOptions = {})
2.@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
3，@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
4.@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
5，@Watch(path: string, options: WatchOptions = {})
6，@Emit(event?: string)
7，@Ref(refKey?: string)
8.Provide/Inject ProvideReactive/InjectReactive

參考:https://github.com/kaorun343/vue-property-decorator
怎么使vue支持ts寫法呢,我們需要用到vue-property-decorator,這個(gè)組件完全依賴于vue-class-component.

首先安裝: npm i -D vue-property-decorator

我們來看下頁面上代碼展示:

<template>
  <div>
    foo:{{foo}}
    defaultArg:{{defaultArg}} | {{countplus}}
    <button @click="delToCount($event)">點(diǎn)擊del emit</button>
    <HellowWordComponent></HellowWordComponent>
    <button ref="aButton">ref</button>
  </div>
</template>
 
<script lang="ts">
import { Component, Vue, Prop, Emit, Ref } from 'vue-property-decorator';
import HellowWordComponent from '@/components/HellowWordComponent.vue';
 
@Component({
  components: {
    HellowWordComponent,
  },
  beforeRouteLeave(to: any, from: any, next: any) {
    console.log('beforeRouteLeave');
    next();
  },
  beforeRouteEnter(to: any, from: any, next: any) {
    console.log('beforeRouteLeave');
    next();
  },
})
 
export default class DemoComponent extends Vue {
  private foo = 'App Foo!';
 
  private count: number = this.$store.state.count;
 
  @Prop(Boolean) private defaultArg: string | undefined;
 
  @Emit('delemit') private delEmitClick(event: MouseEvent) {}
 
  @Ref('aButton') readonly ref!: HTMLButtonElement;
 
  // computed;
  get countplus () {
    return this.count;
  }
 
  created() {}
 
  mounted() {}
 
  beforeDestroy() {}
 
  public delToCount(event: MouseEvent) {
    this.delEmitClick(event);
    this.count += 1; // countplus 會累加
  }
 
}
 
</script>
 
<style lang="less">
...
</style>

vue-proporty-decorator它具備以下幾個(gè)裝飾器和功能:

@Component
@Prop
@PropSync
@Model
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref

1.@Component(options:ComponentOptions = {})

@Component 裝飾器可以接收一個(gè)對象作為參數(shù)，可以在對象中聲明 components ，filters，directives等未提供裝飾器的選項(xiàng)，也可以聲明computed，watch等

registerHooks:
除了上面介紹的將beforeRouteLeave放在Component中之外,還可以全局注冊,就是registerHooks

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
 
Component.registerHooks([
  'beforeRouteLeave',
  'beforeRouteEnter',
]);
 
@Component
export default class App extends Vue {
  beforeRouteLeave(to: any, from: any, next: any) {
    console.log('beforeRouteLeave');
    next();
  }
 
  beforeRouteEnter(to: any, from: any, next: any) {
    console.log('beforeRouteLeave');
    next();
  }
}
</script>

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

@Prop裝飾器接收一個(gè)參數(shù)，這個(gè)參數(shù)可以有三種寫法：

Constructor，例如String，Number，Boolean等，指定 prop 的類型；
Constructor[]，指定 prop 的可選類型；
PropOptions，可以使用以下選項(xiàng)：type，default，required，validator。

注意:屬性的ts類型后面需要加上undefined類型；或者在屬性名后面加上!，表示非null 和 非undefined
的斷言，否則編譯器會給出錯(cuò)誤提示；

// 父組件:
<template>
  <div class="Props">
    <PropComponent :name="name" :age="age" :sex="sex"></PropComponent>
  </div>
</template>
 
<script lang="ts">
import {Component, Vue,} from 'vue-property-decorator';
import PropComponent from '@/components/PropComponent.vue';
 
@Component({
  components: {PropComponent,},
})
export default class PropsPage extends Vue {
  private name = '張三';
  private age = 1;
  private sex = 'nan';
}
</script>
 
// 子組件:
<template>
  <div class="hello">
    name: {{name}} | age: {{age}} | sex: {{sex}}
  </div>
</template>
 
<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
 
@Component
export default class PropComponent extends Vue {
   @Prop(String) readonly name!: string | undefined;
   @Prop({ default: 30, type: Number }) private age!: number;
   @Prop([String, Boolean]) private sex!: string | boolean;
}
</script>

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

@PropSync裝飾器與@prop用法類似，二者的區(qū)別在于：

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

propName: string 表示父組件傳遞過來的屬性名；

options: Constructor | Constructor[] | PropOptions 與@Prop的第一個(gè)參數(shù)一致；@PropSync 會生成一個(gè)新的計(jì)算屬性。

注意,使用PropSync的時(shí)候是要在父組件配合.sync使用的

// 父組件
<template>
  <div class="PropSync">
    <h1>父組件</h1>
    like:{{like}}
    <hr/>
    <PropSyncComponent :like.sync="like"></PropSyncComponent>
  </div>
</template>
 
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import PropSyncComponent from '@/components/PropSyncComponent.vue';
 
@Component({components: { PropSyncComponent },})
export default class PropSyncPage extends Vue {
  private like = '父組件的like';
}
</script>
 
// 子組件
<template>
  <div class="hello">
    <h1>子組件:</h1>
    <h2>syncedlike:{{ syncedlike }}</h2>
    <button @click="editLike()">修改like</button>
  </div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue, PropSync,} from 'vue-property-decorator';
 
@Component
export default class PropSyncComponent extends Vue {
  @PropSync('like', { type: String }) syncedlike!: string; // 用來實(shí)現(xiàn)組件的雙向綁定,子組件可以更改父組件穿過來的值
 
  editLike(): void {
    this.syncedlike = '子組件修改過后的syncedlike!'; // 雙向綁定,更改syncedlike會更改父組件的like
  }
}
</script>

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

@Model裝飾器允許我們在一個(gè)組件上自定義v-model，接收兩個(gè)參數(shù)：

event: string 事件名。
options: Constructor | Constructor[] | PropOptions 與@Prop的第一個(gè)參數(shù)一致。

注意,有看不懂的,可以去看下vue官網(wǎng)文檔, https://cn.vuejs.org/v2/api/#model

// 父組件
<template>
  <div class="Model">
    <ModelComponent v-model="fooTs" value="some value"></ModelComponent>
    <div>父組件 app : {{fooTs}}</div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ModelComponent from '@/components/ModelComponent.vue';
 
@Component({ components: {ModelComponent} })
export default class ModelPage extends Vue {
  private fooTs = 'App Foo!';
}
</script>
 
// 子組件
<template>
  <div class="hello">
    子組件:<input type="text" :value="checked" @input="inputHandle($event)"/>
  </div>
</template>
 
<script lang="ts">
import {Component, Vue, Model,} from 'vue-property-decorator';
 
@Component
export default class ModelComponent extends Vue {
   @Model('change', { type: String }) readonly checked!: string
 
   public inputHandle(that: any): void {
     this.$emit('change', that.target.value); // 后面會講到@Emit,此處就先使用this.$emit代替
   }
}
</script>

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

@Watch 裝飾器接收兩個(gè)參數(shù)：
path: string 被偵聽的屬性名；options?: WatchOptions={} options可以包含兩個(gè)屬性：

immediate?:boolean 偵聽開始之后是否立即調(diào)用該回調(diào)函數(shù)；
deep?:boolean 被偵聽的對象的屬性被改變時(shí)，是否調(diào)用該回調(diào)函數(shù)；

發(fā)生在beforeCreate勾子之后，created勾子之前

<template>
  <div class="PropSync">
    <h1>child:{{child}}</h1>
    <input type="text" v-model="child"/>
  </div>
</template>
 
<script lang="ts">
import { Vue, Watch, Component } from 'vue-property-decorator';
 
@Component
export default class WatchPage extends Vue {
  private child = '';
 
  @Watch('child')
  onChildChanged(newValue: string, oldValue: string) {
    console.log(newValue);
    console.log(oldValue);
  }
}
</script>

6，@Emit(event?: string)

@Emit 裝飾器接收一個(gè)可選參數(shù)，該參數(shù)是$Emit的第一個(gè)參數(shù)，充當(dāng)事件名。如果沒有提供這個(gè)參數(shù)，$Emit會將回調(diào)函數(shù)名的camelCase轉(zhuǎn)為kebab-case，并將其作為事件名；
@Emit會將回調(diào)函數(shù)的返回值作為第二個(gè)參數(shù)，如果返回值是一個(gè)Promise對象，$emit會在Promise對象被標(biāo)記為resolved之后觸發(fā)；
@Emit的回調(diào)函數(shù)的參數(shù)，會放在其返回值之后，一起被$emit當(dāng)做參數(shù)使用。

// 父組件
<template>
  <div class="">
    點(diǎn)擊emit獲取子組件的名字<br/>
    姓名:{{emitData.name}}
    <hr/>
    <EmitComponent sex='女' @add-to-count="returnPersons" @delemit="delemit"></EmitComponent>
  </div>
</template>
 
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import EmitComponent from '@/components/EmitComponent.vue';
 
@Component({
  components: { EmitComponent },
})
export default class EmitPage extends Vue {
  private emitData = { name: '我還沒有名字' };
 
  returnPersons(data: any) {
    this.emitData = data;
  }
 
  delemit(event: MouseEvent) {
    console.log(this.emitData);
    console.log(event);
  }
}
</script>
 
// 子組件
<template>
  <div class="hello">
    子組件:
    <div v-if="person">
      姓名:{{person.name}}<br/>
      年齡:{{person.age}}<br/>
      性別:{{person.sex}}<br/>
    </div>
    <button @click="addToCount(person)">點(diǎn)擊emit</button>
    <button @click="delToCount($event)">點(diǎn)擊del emit</button>
  </div>
</template>
 
<script lang="ts">
import {
  Component, Vue, Prop, Emit,
} from 'vue-property-decorator';
 
type Person = {name: string; age: number; sex: string };
 
@Component
export default class PropComponent extends Vue {
  private name: string | undefined;
 
  private age: number | undefined;
 
  private person: Person = { name: '我是子組件的張三', age: 1, sex: '男' };
 
  @Prop(String) readonly sex: string | undefined;
 
  @Emit('delemit') private delEmitClick(event: MouseEvent) {}
 
  @Emit() // 如果此處不設(shè)置別名字,則默認(rèn)使用下面的函數(shù)命名
  addToCount(p: Person) { // 此處命名如果有大寫字母則需要用橫線隔開  @add-to-count
    return this.person; // 此處不return,則會默認(rèn)使用括號里的參數(shù)p;
  }
 
  delToCount(event: MouseEvent) {
    this.delEmitClick(event);
  }
}
</script>

7，@Ref(refKey?: string)

@Ref 裝飾器接收一個(gè)可選參數(shù)，用來指向元素或子組件的引用信息。如果沒有提供這個(gè)參數(shù)，會使用裝飾器后面的屬性名充當(dāng)參數(shù)

<template>
  <div class="PropSync">
    <button @click="getRef()" ref="aButton">獲取ref</button>
    <RefComponent name="names" ref="RefComponent"></RefComponent>
  </div>
</template>
 
<script lang="ts">
import { Vue, Component, Ref } from 'vue-property-decorator';
import RefComponent from '@/components/RefComponent.vue';
 
@Component({
  components: { RefComponent },
})
export default class RefPage extends Vue {
  @Ref('RefComponent') readonly RefC!: RefComponent;
  @Ref('aButton') readonly ref!: HTMLButtonElement;
  getRef() {
    console.log(this.RefC);
    console.log(this.ref);
  }
}
</script>

8.Provide/Inject ProvideReactive/InjectReactive

@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) decorator @ProvideReactive(key?: string | symbol) / @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey) decorator

提供/注入裝飾器,
key可以為string或者symbol類型,

相同點(diǎn):Provide/ProvideReactive提供的數(shù)據(jù),在內(nèi)部組件使用Inject/InjectReactive都可取到不同點(diǎn):
如果提供(ProvideReactive)的值被父組件修改，則子組件可以使用InjectReactive捕獲此修改。

// 最外層組件
<template>
  <div class="">
    <H3>ProvideInjectPage頁面</H3>
    <div>
      在ProvideInjectPage頁面使用Provide,ProvideReactive定義數(shù)據(jù),不需要props傳遞數(shù)據(jù)
      然后爺爺套父母,父母套兒子,兒子套孫子,最后在孫子組件里面獲取ProvideInjectPage
      里面的信息
    </div>
    <hr/>
    <provideGrandpa></provideGrandpa> <!--爺爺組件-->
  </div>
</template>
 
<script lang="ts">
import {
  Vue, Component, Provide, ProvideReactive,
} from 'vue-property-decorator';
import provideGrandpa from '@/components/ProvideGParentComponent.vue';
 
@Component({
  components: { provideGrandpa },
})
export default class ProvideInjectPage extends Vue {
  @Provide() foo = Symbol('fooaaa');
 
  @ProvideReactive() fooReactive = 'fooReactive';
 
  @ProvideReactive('1') fooReactiveKey1 = 'fooReactiveKey1';
 
  @ProvideReactive('2') fooReactiveKey2 = 'fooReactiveKey2';
 
  created() {
    this.foo = Symbol('fooaaa111');
    this.fooReactive = 'fooReactive111';
    this.fooReactiveKey1 = 'fooReactiveKey111';
    this.fooReactiveKey2 = 'fooReactiveKey222';
  }
}
</script>
 
// ...provideGrandpa調(diào)用父母組件
<template>
  <div class="hello">
    <ProvideParentComponent></ProvideParentComponent>
  </div>
</template>
 
// ...ProvideParentComponent調(diào)用兒子組件
<template>
  <div class="hello">
    <ProvideSonComponent></ProvideSonComponent>
  </div>
</template>
 
// ...ProvideSonComponent調(diào)用孫子組件
<template>
  <div class="hello">
    <ProvideGSonComponent></ProvideGSonComponent>
  </div>
</template>
 
 
// 孫子組件<ProvideGSonComponent>,經(jīng)過多層引用后,在孫子組件使用Inject可以得到最外層組件provide的數(shù)據(jù)哦
<template>
  <div class="hello">
    <h3>孫子的組件</h3>
    爺爺組件里面的foo:{{foo.description}}<br/>
    爺爺組件里面的fooReactive:{{fooReactive}}<br/>
    爺爺組件里面的fooReactiveKey1:{{fooReactiveKey1}}<br/>
    爺爺組件里面的fooReactiveKey2:{{fooReactiveKey2}}
    <span style="padding-left:30px;">=> fooReactiveKey2沒有些key所以取不到哦</span>
  </div>
</template>
 
<script lang="ts">
import {
  Component, Vue, Inject, InjectReactive,
} from 'vue-property-decorator';
 
@Component
export default class ProvideGSonComponent extends Vue {
  @Inject() readonly foo!: string;
 
  @InjectReactive() fooReactive!: string;
 
  @InjectReactive('1') fooReactiveKey1!: string;
 
  @InjectReactive() fooReactiveKey2!: string;
}
</script>

demo地址:https://github.com/slailcp/vue-cli3/tree/master/src/pc-project/views/manage

到此這篇關(guān)于一文秒懂vue-property-decorator的文章就介紹到這了,更多相關(guān)vue-property-decorator內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: