Vue3父子组件数据双向绑定
父组件:
<template>
<div>
<h1>父组件</h1>
<p>用户名: {{username}} </p>
父组件输入框:<input type="text" v-model="parentValue" />
<p>---------------------------------------------------------------------------------</p>
<Comp2 v-model:name="username" :value="parentValue"/>
</div>
</template>
<script>
import Comp2 from "./Comp2.vue"
export default {
components: { Comp2 },
data() {
return {
username: '',
parentValue:"父组件传给子组件的值.."
}
}
};
</script>
子组件:
<template>
<h1>子组件</h1>
<div class="border blueviolet">
用户名: <input type="text" v-model="username" ="changeUsername" />
</div>
<br>
<div>父组件输入框的数据:{{value}}</div>
</template>
<script>
export default {
props: {
name: String,
value: String,
},
watch:{
value(){
console.log(this.value); // 父组件传给子组件的值
}
},
data() {
return {
username: "",
};
},
methods: {
changeUsername() {
this.$emit("update:name", this.username);
},
},
};
</script>
二、说明:
vue3 中,通过 v-model:propName 实现自定义组件间数据的双向绑定。使用方法:
(1)父组件通过 “v-model:绑定的属性名” 传递数据属性,支持绑定多个属性;
(2)子组件配置emits,通过 “update:属性名” 的格式定义更新事件
需要注意的是:
(1)子组件也并不是直接拿 props 传的变量直接用,而是需要声明一个响应式变量 - 通过 ref(props.modelValue) 声明基于 props 传的变量值为初始化值的响应式数据。
(2)且如果父组件传的是异步数据的话,还需要对其进行监听。
(3)当子组件数据改变时需要通过 emit(‘update:modelValue’, e) 去修改父组件数据实现双向绑定。