// test.vue
<template>
<div>
<input v-model="val">
<testComponent v-model="val" />
</div>
</template>
<script>
export default {
data() {
return {
val: '测试双向绑定'
}
}
}
</script>
父子组件实现双向绑定有两种方法,组件可使用 value 或 v-model 方式进行绑定
方法一:(v-model + 计算属性)
// testComponent.vue
<template>
<div>
<input v-model="newVal">
</div>
</template>
<script>
export default {
props: {
value: [String]
},
computed: {
newVal: {
get() {
return this.value
},
set(str) {
this.$emit('input', str)
}
}
}
}
</script>
方法二:(value + input事件)
// testComponent.vue
<template>
<div>
<input :value="value" @input="e => $emit('input', e.target.value)">
</div>
</template>
<script>
export default {
props: {
value: [String]
}
}
</script>
注:自定义组件 v-model prop 和默认事件名称:
prop:value --> modelValue(vue3)
event:input --> update
:
modelValue(vue3)