vue2.0.sync修饰符和自定义组件使用v-model

.sync

<Son  :num.sync="num" />

相当于

<Son  :num="num" @update:num="num = $event" />

Son组件内部

export default {
	props: {
		num: {
			type: Number,
           	 default: 0
		}
	},
    methods: {
        ...() {
        	this.$emit('update:num', ...)
    	}
    }
}

v-model

相关链接:自定义组件的 v-model

v-model在同一只能使用一次

<Son  v-model="num" />

相当于:

<Son  :value="num" @input="num = $event" />

子组件内部

export default {
    props: {
        value: {
            type: Number,
            default: 0
        }
    },
    methods: {
        ...() {
        this.$emit('input', ...)
    	}
    }
}

使用model修改绑定prop和自定义事件

export default {
    model: {
        prop: 'num',
        event: 'changeNum'
    },
    props: {
        num: {
            type: Number,
            default: 0
        }
    },
    methods: {
        ...() {
        	this.$emit('changeNum', ...)
		}
    }
}
posted @ 2021-11-05 16:19  lalalady  阅读(170)  评论(0)    收藏  举报