vue 自定义组件 通过v-model 实现父子组件数据的双向绑定

  在父子组件的通信中，为了防止子组件不小心改变父组件的状态，而导致数据流的冗余复杂、不易理解，所以vue规定了单向数据流，父组件的prop更新在子组件中会同时响应，而反过来则不能。但是我们依然可以通过v-model来实现数据的双向绑定。

  v-model一般用在表单绑定数据，如：

<input v-model="value">

  等同于：

<input
  :value="inputValue"
  @input="value => {inputValue=value}">

 因此，在自定义组件中使用 v-model 指令，那么就意味着：

• 接收一个 value prop
• 触发 input 事件，并传入新值

利用 $emit 触发 input 事件：

this.$emit('input', value);

 

第一种：

子组件

  <template>
   <div>
 // 使用时有v-model属性，value默认值‘child’ 不会被渲染，而是v-model绑定的parent值被渲染，这儿value会被赋值为v-model绑定的parent的值。
     <p>{{value}}</p>
     <button @click="changeValue">在子组件内修改v-model值，并且动态响应给父组件</button>
   </div>
 </template> 
<script>
export default {
  props: {
    value: { // 必须要使用value
　   default: 'child',
    },
 },
 methods: {
    changeValue () {
      let newValue = '2'
      this.$emit('input',newValue) // 这儿必须用input 发送数据，发送的数据会被父级v-model=“parent”接收到，再被value=parent传回来。
    }
 }
}

 该方法，一定要注意，props的值一定要定义为‘value’，不然不起作用，提交给父组件的事件名为‘input’

第二种（官网推荐的方法）

子组件

<template>
  <div>
     <p>{{parentProp}}</p>
      <button @click="changeValue">在子组件内修改prop值</button>
    </ul>
  </div>
</template>

<script>
  export default {
    model: {    // 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
      prop: 'parentProp',
      event: 'change'
    },
    props: {
      msg: ''
    },
    methods: {
      changeValue () {
        this.$emit('change', this.parentProp++)
      }
    }
  }
</script>

 

在父组件引用：

<child v-model="parent"></child>　　

 总结：当然实现父子组件的双向绑定，还有其他方案；

 例如：通过vuex状态管理、使用.sync修饰符等。

            如有错误，请友情指出，好人一生平安～～