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" @input="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) 去修改父组件数据实现双向绑定。
