vue父子组件之间双向数据绑定的三种方式(vue2/vue3)

在做项目的过程中,经常遇到父子组件通信的问题,现在对3种通信方式总结一下:

一、prop向下传递,emit向上传递

初始版本

父组件通过prop将数据传递给子组件,子组件通过emit事件将子组件数据传递给父组件

vue父子组件之间双向数据绑定的三种方式(vue2/vue3)_第1张图片

//父组件

//子组件child

二、v2.2.0+ 新增 v-model 通过v-model属性实现

//父组件

​
//子组件child


vue3允许写多个v-model,vue2不允许写多个v-model 

//父组件

三、sync修饰符(v2.3.0+ 新增)

// 父组件

//子组件


vue3取消了.sync这种语法,使用v-model:title 语法代替

// 父组件

//子组件


你可能感兴趣的:(VUE学习笔记,vue.js,前端,javascript)