參考:https://github.com/kaorun343/vue-property-decorator
怎麼使vue支持ts寫法呢,我們需要用到vue-property-decorator,這個組件完全依賴於vue-class-component
.
首先安裝: npm i -S vue-proporty-decorator
我們來看下頁面上代碼展示:
<template>
<div>
foo:{{foo}}
defaultArg:{{defaultArg}} | {{countplus}}
<button @click="delToCount($event)">點擊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它具備以下幾個裝飾器和功能:
@Component
@Prop
@PropSync
@Model
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
1.@Component(options:ComponentOptions = {})
@Component
裝飾器可以接收一個對象作爲參數,可以在對象中聲明 components ,filters,directives
等未提供裝飾器的選項,也可以聲明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
裝飾器接收一個參數,這個參數可以有三種寫法:
Constructor
,例如String,Number,Boolean
等,指定prop
的類型;Constructor[]
,指定prop
的可選類型;PropOptions
,可以使用以下選項:type,default,required,validator
。
注意:屬性的ts類型後面需要加上undefined
類型;或者在屬性名後面加上!,表示非null
和 非undefined
的斷言,否則編譯器會給出錯誤提示;
// 父組件:
<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
用法類似,二者的區別在於:
@PropSync
裝飾器接收兩個參數:propName: string
表示父組件傳遞過來的屬性名;options: Constructor | Constructor[] | PropOptions
與@Prop
的第一個參數一致;@PropSync
會生成一個新的計算屬性。
注意,使用PropSync的時候是要在父組件配合.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; // 用來實現組件的雙向綁定,子組件可以更改父組件穿過來的值
editLike(): void {
this.syncedlike = '子組件修改過後的syncedlike!'; // 雙向綁定,更改syncedlike會更改父組件的like
}
}
</script>
4.@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
@Model
裝飾器允許我們在一個組件上自定義v-model
,接收兩個參數:
event: string
事件名。options: Constructor | Constructor[] | PropOptions
與@Prop
的第一個參數一致。
注意,有看不懂的,可以去看下vue官網文檔, 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
裝飾器接收兩個參數:
path: string
被偵聽的屬性名;options?: WatchOptions={} options
可以包含兩個屬性 :immediate?:boolean
偵聽開始之後是否立即調用該回調函數;deep?:boolean
被偵聽的對象的屬性被改變時,是否調用該回調函數;
發生在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
裝飾器接收一個可選參數,該參數是$Emit
的第一個參數,充當事件名。如果沒有提供這個參數,$Emit
會將回調函數名的camelCase
轉爲kebab-case
,並將其作爲事件名;@Emit
會將回調函數的返回值作爲第二個參數,如果返回值是一個Promise
對象,$emit
會在Promise
對象被標記爲resolved
之後觸發;@Emit
的回調函數的參數,會放在其返回值之後,一起被$emit
當做參數使用。
// 父組件
<template>
<div class="">
點擊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)">點擊emit</button>
<button @click="delToCount($event)">點擊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() // 如果此處不設置別名字,則默認使用下面的函數命名
addToCount(p: Person) { // 此處命名如果有大寫字母則需要用橫線隔開 @add-to-count
return this.person; // 此處不return,則會默認使用括號裏的參數p;
}
delToCount(event: MouseEvent) {
this.delEmitClick(event);
}
}
</script>
7,@Ref(refKey?: string)
@Ref
裝飾器接收一個可選參數,用來指向元素或子組件的引用信息。如果沒有提供這個參數,會使用裝飾器後面的屬性名充當參數
<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
@Provide(key?: string | symbol)
@ProvideReactive(key?: string | symbol)
/ @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey)
decorator
提供/注入裝飾器,
key可以爲string或者symbol類型,
相同點:Provide/ProvideReactive提供的數據,在內部組件使用Inject/InjectReactive都可取到
不同點:
如果提供(ProvideReactive
)的值被父組件修改,則子組件可以使用InjectReactive
捕獲此修改。
// 最外層組件
<template>
<div class="">
<H3>ProvideInjectPage頁面</H3>
<div>
在ProvideInjectPage頁面使用Provide,ProvideReactive定義數據,不需要props傳遞數據
然後爺爺套父母,父母套兒子,兒子套孫子,最後在孫子組件裏面獲取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調用父母組件
<template>
<div class="hello">
<ProvideParentComponent></ProvideParentComponent>
</div>
</template>
// ...ProvideParentComponent調用兒子組件
<template>
<div class="hello">
<ProvideSonComponent></ProvideSonComponent>
</div>
</template>
// ...ProvideSonComponent調用孫子組件
<template>
<div class="hello">
<ProvideGSonComponent></ProvideGSonComponent>
</div>
</template>
// 孫子組件<ProvideGSonComponent>,經過多層引用後,在孫子組件使用Inject可以得到最外層組件provide的數據哦
<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