vue3组件通信之v-model篇

简述  

     相信很多人对vue的v-model指令不陌生吧，在vue2的时候，v-model肩负着数据双向绑定的任务，到了Vue3之后，v-model也迎来了新的变化，即可以实现组件的通信。

案例

父组件

child

  父组件在使用v-model绑定数据后，子组件使用 let props = defineProps(["modelValue"]) 接收，建立数据数据通信了

  同时使用事件回调可以实现组件的通信

//子组件注册函数

const handler = ()=>{

   //触发自定义事件

   $emit('update:modelValue',props.modelValue+1000);

}

//父组件创建回调函数

const handler = (num) => {

  //将来接受子组件传递过来的数据

  money.value = num;

};

child1

 这个案例不仅 实现了组件通信，更重要的是实现的通信传递参数，父组件使用                             v-model:pageSize="pageSize"绑定事件，子组件使用如下方法接收，并绑定回调函数

 总结

   使用v-model进行组件通信也是一个不错的方法