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

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

vue考虑到组件的可维护性，是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信（第一种方式），通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。

第一种（原始，比较麻烦）

//父组件




//子组件child

第二种 （自定义组件的 v-model 2.2.0+ 新增）

<input v-model="searchText">
等价于：
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

当用在组件上时，v-model 则会这样

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

//1、将其 value attribute 绑定到一个名叫 value 的 prop 上
//2、子组件通过自定义的 input 事件抛出
Vue.component('custom-input', {
  props: ['value'],
  template: `
    
  `
})

第三种（.sync 2.3.0+ 新增）

//父组件




//子组件

第四种 （vue3）

• vue3取消了.sync这种语法，使用v-model 语法代替。
• 默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。
• 我们可以通过给 v-model 指定一个参数来更改这些名字
• vue3允许写多个v-model

// 父组件




//子组件

ve3多个 v-model 绑定

//父组件



//子组件