Vue3中v-model实现组件通信

一般我们在实现组件通信的时候，都会使用到父传子跟子传父来实现父子之间的通信，以下面的例子来说

//Person.vue
<h1>父组件钱数{{ money }}</h1>
//父组件给子组件传值
<Son :money="money" @changeMoney="changeMoney"></Son>


//js
//利用自定义事件来获取子组件传来的值
const changeMoney = (m)=>{
    //子组件传来的钱数，改变父组件的值
    money.value = m
}



//Son.vue

<h2>子组件得到的钱数{{ money }}</h2>

<button @click="changeMoney">改变钱数</button>

//js
//自定义事件改变money //子组件给父组件传值
const changeMoney = ()=>{
    emits('changeMoney',props.money+1000)
}

上面这个例子，是我们比较常见的方法，下面说怎么利用v-model实现组件通信

 利用v-model实现组件通信

//Person.vue

<Son v-model="money"></Son>
<!-- 相当于 -->
<Son :modelValue="money" @update:modelValue="changeMoney"></Son>


const changeMoney = (m) => {
   console.log('子组件传来的值',m);
   money.value = m
}




//Son.vue
const click= () => {
  emits("update:modelValue", props.modelValue + 1000);
};

还可以利用v-model给子组件绑定多个值

//Person.vue
//这样写相当于给子组件传了两个值name跟age
<Son v-model:name="name" v-model:age="age"></Son>


//Son.vue
<button @click="changeName">改变姓名</button>
<button @click="changeAge">改变年龄</button>

const changeAge = () => {
  emits("update:age",props.age+1);
};
const changeName = () => {
  emits("update:name",props.name+'~');
};


//或

<button @click="emits('update:name',props.name+'~')">改变姓名</button>
<button @click="emits('update:age',props.age+1)">改变年龄</button>