vue父组件与子组件双向绑定

前言

我们知道父组件通过props可以控制子组件，如果需要子组件控制父组件就需要加一个v-on自定义事件。将vue官方文档中的props和v-on绑定自定义事件结合起来，就可以实现父组件与子组件之间的双向绑定了。

例子

这里在父组件定义一个输入框，在子组件中定义一个下拉框，做个例子吧。

在父组件的输入框中输入选项，子组件的下拉框会自动选择；选择子组件的下拉框，父组件的输入框中会自动显示。

//父组件
<template>
  <div>
    <input type="text" v-model="parentSelect"></input>
    <child-select :value="parentSelect" @event="change"></child-select>
  </div>
</template>
//
<script>
import childSelect from './childSelect.vue'
export default {
    name: 'parent',
    components:{
      childSelect
    },
    data: () {
      return {
        parentSelect: '北京',
      }
    },
    methods: {
      change: function(value){
        this.parentSelect = value;
      }
    }
}
</script>

//子组件
<template>
  <div>
    <select v-model="value" :onchange="change(value)">
      <option selected="selected">北京</option>
      <option>上海</option>
      <option>天津</option>
      <option>重庆</option>
    </select>
  </div>
</template>
<script>
export default{
    name: "child",
    props: ["value"],
    methods: {
      change: function(value) {
        this.$emit("event",value);
      }
    }
}
</script>

这样就实现了父组件与子组件之间的双向绑定了。