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);

 

第一种：

子组件

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

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

第二种（较常用的）

子组件

 1 <template>
 2   <div>
 3      <p>{{parentProp}}</p>
 4       <button @click="changeValue">在子组件内修改prop值</button>
 5     </ul>
 6   </div>
 7 </template>
 8 
 9 <script>
10   export default {
11     model: {    // 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
12       prop: 'parentProp',
13       event: 'change'
14     },
15     props: {
16       msg: ''
17     },
18     methods: {
19       changeValue () {
20         this.$emit('change', this.parentProp++)
21       }
22     }
23   }
24 </script>

在父组件引用：

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

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

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

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