1. Install
npm i -s vue-property-decorator
2. Usage
1，@Component(options:ComponentOptions = {})
@Component Decorator can receive an object as a parameter, and can declare options for decorators such as components, filters, directives, etc. in the object.
Although it can also be declared in the @Component decorator, it is not recommended to do so, because when accessing this, the compiler will give an error message
import { Vue, Component } from 'vue-property-decorator'
@Component({
filters: {
toFixed: (num: number, fix: number = 2) => {
return (fix)
}
}
})
export default class MyComponent extends Vue {
public list: number[] = [0, 1, 2, 3, 4]
get evenList() {
return ((item: number) => item % 2 === 0)
}
}
2，@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
@Prop Decorator receives a parameter, which can be written in three ways:
- Constructor, such as String, Number, Boolean, etc., specifies the type of prop;
- Constructor[] , specify the optional type of prop;
- PropOptions , you can use the following options: type, default, required, validator .
import { Vue, Component, Prop } from 'vue-property-decorator'
@Componentexport default class MyComponent extends Vue {
@Prop(String) propA: string | undefined
@Prop([String, Number]) propB!: string | number
@Prop({
type: String,
default: 'abc'
})
propC!: string
}
The following js writing method is equivalent to
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
}
}
}
Notice:
- The attribute's ts type needs to be added with the undefined type; or the attribute name is added with! to indicate non-null and non-undefined
- assertion, otherwise the compiler will give an error message;
- To specify the default value, you must use the writing method in the above example. If you assign a value directly after the attribute name, this attribute will be overridden and an error will be reported.
3，@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
- The @PropSync decorator is similar to @prop. The difference between the two is:
- @PropSync Decorator receives two parameters:
propName: string represents the attribute name passed by the parent component;
options: Constructor | Constructor[] | PropOptions are consistent with the first parameter of @Prop;
@PropSync will generate a new computed property.
import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
@PropSync('propA', { type: String, default: 'abc' }) syncedPropA!: string
}
The following js writing method is equivalent to
export default {
props: {
propA: {
type: String,
default: 'abc'
}
},
computed: {
syncedPropA: {
get() {
return
},
set(value) {
this.$emit('update:propA', value)
}
}
}
}
Note: @PropSync needs to be used with the parent component's .sync modifier
4，@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
The @Model decorator allows us to customize v-model on a component and receive two parameters:
event: string event name.
options: Constructor | Constructor[] | PropOptions are consistent with the first parameter of @Prop.
import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class MyInput extends Vue {
@Model('change', { type: String, default: '123' }) value!: string
}
The following js writing method is equivalent to
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: String,
default: '123'
}
}
}
The above example specifies the change event, so we also need to add the corresponding event to the template:
<template>
<input
type="text"
:value="value"
@change="$emit('change', $)"
/>
</template>
Students who don’t understand custom v-models can check it outCustom events
5，@Watch(path: string, options: WatchOptions = {})
@Watch Decorator receives two parameters:
path: string The attribute name to be listened to;
options?: WatchOptions={} options can contain two properties:
immediate?:boolean Whether to call the callback function immediately after listening starts;
deep?:boolean Whether to call the callback function when the property of the object being listened to is changed;
Listening begins, happens after the beforeCreate hook, before the created hook
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class MyInput extends Vue {
@Watch('msg')
onMsgChanged(newValue: string, oldValue: string) {}
@Watch('arr', { immediate: true, deep: true })
onArrChanged1(newValue: number[], oldValue: number[]) {}
@Watch('arr')
onArrChanged2(newValue: number[], oldValue: number[]) {}
}
The following js writing method is equivalent to
export default {
watch: {
msg: [
{
handler: 'onMsgChanged',
immediate: false,
deep: false
}
],
arr: [
{
handler: 'onArrChanged1',
immediate: true,
deep: true
},
{
handler: 'onArrChanged2',
immediate: false,
deep: false
}
]
},
methods: {
onMsgVhanged(newValue, oldValue) {},
onArrChange1(newValue, oldValue) {},
onArrChange2(newValue, oldValue) {}
}
}
6，@Emit(event?: string)
- The @Emit Decorator receives an optional parameter, which is the first parameter of $Emit and acts as the event name. If this parameter is not provided, $Emit will convert the camelCase of the callback function name to kebab-case and use it as the event name;
- @Emit will take the return value of the callback function as the second parameter. If the return value is a Promise object, $emit will be triggered after the Promise object is marked as resolved;
- The parameters of the @Emit callback function will be placed after its return value and will be used as a parameter by $emit.
import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
count = 0
@Emit()
addToCount(n: number) {
+= n
}
@Emit('reset')
resetCount() {
= 0
}
@Emit()
returnValue() {
return 10
}
@Emit()
onInputChange(e) {
return
}
@Emit()
promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
The following js writing method is equivalent to
export default {
data() {
return {
count: 0
}
},
methods: {
addToCount(n) {
+= n
this.$emit('add-to-count', n)
},
resetCount() {
= 0
this.$emit('reset')
},
returnValue() {
this.$emit('return-value', 10)
},
onInputChange(e) {
this.$emit('on-input-change', , e)
},
promise() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
(value => {
this.$emit('promise', value)
})
}
}
}
7，@Ref(refKey?: string)
@Ref The decorator receives an optional parameter that points to reference information for an element or child component. If this parameter is not provided, the attribute name after the decorator will be used as the parameter
import { Vue, Component, Ref } from 'vue-property-decorator'
import { Form } from 'element-ui'
@Componentexport default class MyComponent extends Vue {
@Ref() readonly loginForm!: Form
@Ref('changePasswordForm') readonly passwordForm!: Form
public handleLogin() {
(valide => {
if (valide) {
// login...
} else {
// error tips
}
})
}
}
The following js writing method is equivalent to
export default {
computed: {
loginForm: {
cache: false,
get() {
return this.$
}
},
passwordForm: {
cache: false,
get() {
return this.$
}
}
}
}
@Provide/@Inject and @ProvideReactive/@InhectReactive
Since you don't need the provide/inject option in normal times, you can leave it for now and study it later if you have time.
refer to:/kaorun343/...
Summarize
The above is the vue-property-decorator manual introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!