英文原文: https://github.com/kaorun343/vue-property-decorator/blob/master/README.md
此庫(kù)完全依賴于vue-class-component, 所以請(qǐng)使用此庫(kù)前, 先閱讀它的文檔
安裝
npm i -S vue-property-decorator
使用
這是一些裝飾器和一個(gè)Mixin函數(shù)
@Prop@PropSync@Model@Watch@Provide@Inject@ProvideReactive@InjectReactive@Emit@Ref-
@Component(由 vue-class-component提供) -
Mixins(名為mixins的輔助函數(shù), 由 vue-class-component提供)
查看Vuex的庫(kù)
@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) 裝飾器
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Prop(Number) readonly propA: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC: string | boolean | undefined
}
相當(dāng)于
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
}
}
}
筆記:
如果你想要獲取類型定義來設(shè)置每個(gè)prop值的type屬性, 你可以使用 reflect-metadata.
- 將
emitDecoratorMetadata設(shè)置為true. - 在引入
vue-property-decorator之前 引入reflect-metadata(只需引入一次reflect-metadata.)
import 'reflect-metadata'
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
@Prop() age!: number
}
每個(gè)prop的默認(rèn)值都要定義為與上面示例代碼相同
不再 支持像@Prop() prop = 'default value' 這樣定義每個(gè)默認(rèn)屬性 .
@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) 裝飾器
import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@PropSync('name', { type: String }) syncedName!: string
}
is equivalent to
export default {
props: {
name: {
type: String
}
},
computed: {
syncedName: {
get() {
return this.name
},
set(value) {
this.$emit('update:name', value)
}
}
}
}
除此之外, 它就像除了將prop名稱作為修飾器參數(shù)外的 @Prop, 此外它還在后面創(chuàng)建了一個(gè)計(jì)算屬性的 getter 和 setter. 這樣你可以將它作為常規(guī)數(shù)據(jù)屬性來與這個(gè)屬性進(jìn)行交互, 同時(shí)也使交互和在父組件上添加.sync一樣容易.
@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) 裝飾器
import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Model('change', { type: Boolean }) readonly checked!: boolean
}
等價(jià)于
export default {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean
}
}
}
@Model 屬性也可以通過reflect-metadata獲取類型定義來設(shè)置type屬性.
@Watch(path: string, options: WatchOptions = {})裝飾器
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {}
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) {}
@Watch('person')
onPersonChanged2(val: Person, oldVal: Person) {}
}
等價(jià)于
export default {
watch: {
child: [
{
handler: 'onChildChanged',
immediate: false,
deep: false
}
],
person: [
{
handler: 'onPersonChanged1',
immediate: true,
deep: true
},
{
handler: 'onPersonChanged2',
immediate: false,
deep: false
}
]
},
methods: {
onChildChanged(val, oldVal) {},
onPersonChanged1(val, oldVal) {},
onPersonChanged2(val, oldVal) {}
}
}
@Provide(key?: string | symbol)/@Inject(options?: { from?: InjectKey, default?: any } | InjectKey) 裝飾器
import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
const symbol = Symbol('baz')
@Component
export class MyComponent extends Vue {
@Inject() readonly foo!: string
@Inject('bar') readonly bar!: string
@Inject({ from: 'optional', default: 'default' }) readonly optional!: string
@Inject(symbol) readonly baz!: string
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
}
等價(jià)于
const symbol = Symbol('baz')
export const MyComponent = Vue.extend({
inject: {
foo: 'foo',
bar: 'bar',
optional: { from: 'optional', default: 'default' },
[symbol]: symbol
},
data() {
return {
foo: 'foo',
baz: 'bar'
}
},
provide() {
return {
foo: this.foo,
bar: this.baz
}
}
})
@ProvideReactive(key?: string | symbol) / @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey)
這兩個(gè)修飾器是@Provide 和 @Inject 的響應(yīng)式版本. 如果一個(gè)被提供的值被父組件修改, 子組件可以監(jiān)聽到這個(gè)修改.
const key = Symbol()
@Component
class ParentComponent extends Vue {
@ProvideReactive() one = 'value'
@ProvideReactive(key) two = 'value'
}
@Component
class ChildComponent extends Vue {
@InjectReactive() one!: string
@InjectReactive(key) two!: string
}
@Emit(event?: string) 裝飾器
@Emit $emit 裝飾的函數(shù), 它們的返回值后面跟著它們的原始參數(shù). 如果返回值是一個(gè)Promise對(duì)象, 則會(huì)在觸發(fā)前達(dá)到完成狀態(tài).
如果事件名稱不提供 event 參數(shù), 函數(shù)名將會(huì)被代替使用. 在這種情況下, 駝峰命名將被轉(zhuǎn)換成短橫線隔開式命名.
import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
count = 0
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount() {
this.count = 0
}
@Emit()
returnValue() {
return 10
}
@Emit()
onInputChange(e) {
return e.target.value
}
@Emit()
promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
等價(jià)于
export default {
data() {
return {
count: 0
}
},
methods: {
addToCount(n) {
this.count += n
this.$emit('add-to-count', n)
},
resetCount() {
this.count = 0
this.$emit('reset')
},
returnValue() {
this.$emit('return-value', 10)
},
onInputChange(e) {
this.$emit('on-input-change', e.target.value, e)
},
promise() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
promise.then(value => {
this.$emit('promise', value)
})
}
}
}
@Ref(refKey?: string) 裝飾器
import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/path/to/another-component.vue'
@Component
export default class YourComponent extends Vue {
@Ref() readonly anotherComponent!: AnotherComponent
@Ref('aButton') readonly button!: HTMLButtonElement
}
等價(jià)于
export default {
computed() {
anotherComponent: {
cache: false,
get() {
return this.$refs.anotherComponent as AnotherComponent
}
},
button: {
cache: false,
get() {
return this.$refs.aButton as HTMLButtonElement
}
}
}
}
