@prop 装饰器
1 import { Vue, Component, Prop } from 'vue-property-decorator' 2 3 @Component 4 export default class YourComponent extends Vue { 5 @Prop(Number) readonly propA: number | undefined //propA属性是Number类型,readonly 表示只读,number|undefined表示Prop的值可能是number或者undefined 6 @Prop({ default: 'default value' }) readonly propB!: string // default:'' 如果没有传参 默认的值 !感叹号表示一定有值 7 @Prop([String, Boolean]) readonly propC: string | boolean | undefined //[String,Boolean] 表示 propC的类型可能是string,boolean
8 }
// @Prop({ required: true, type: String, default: "" }) label?: string // required:true 表示一定有值 跟 ! 一样
相当于
1 export default { 2 props: { 3 propA: { 4 type: Number, 5 }, 6 propB: { 7 default: 'default value', 8 }, 9 propC: { 10 type: [String, Boolean], 11 }, 12 }, 13 }
@PropSync 装饰器
import { Vue, Component, PropSync } from 'vue-property-decorator' @Component export default class YourComponent extends Vue {
// 'name' 是定义的Prop属性 {type:String}是表示 'name'的值是字符串类型
// syncedName 表示一个计算属性,get就是获得'name'的值,set 就是修改name的值,然后抛出update:name事件,把value作为参数传入,就能在父组件更新name变量的值
@PropSync('name', { type: String }) syncedName!: string
}
相当于
export default { props: { name: { type: String, }, }, computed: { syncedName: { get() { return this.name }, set(value) { this.$emit('update:name', value) }, }, }, }
@Model 装饰器
import { Vue, Component, Model } from 'vue-property-decorator' @Component export default class YourComponent extends Vue {
//'change' 表示如果修改了checked的值,那么就抛出change事件, 传入的参数就是修改之后的值 @Model('change', { type: Boolean }) readonly checked!: boolean }
相当于
export default { model: { prop: 'checked', event: 'change', }, props: { checked: { type: Boolean, }, }, }
@Watch 装饰器
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) {} }
相当于
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) {}, }, }