通过v-model绑定父子组件，最方便的组件通信

最近在做的一个项目少说要有几十个下拉选择框，于是我就对element-ui的下拉框进行了二次封装，但是在使用时候发现了一个问题，每个组件都需要提交一个事件来同步在父组件表单中绑定的对象，特别繁琐。

于是我就想到用v-model来绑定父父组件的值，在子组件直接改变，而不是再提交事件到父组件去改变。

逻辑很简单，直接上代码

父组件

<template>
<div class="home">
  <Child v-model="value" />
</div>
</template>

<script>
import Child from "./Child"
export default {
  name: "Home",
  components: {
    Child
  },
  data() {
    return {
      value: ""

    }
  }
};
</script>

子组件

<template>
<el-input :value="value" @input="$emit('input', $event)"></el-input>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  }
}
</script>

这时候在父组件中监听value就会发现在父组件中注册事件值也是会跟着改变的

<template>
<div class="home">
  <Child v-model="value" />
</div>
</template>

<script>
import Child from "./Child"
export default {
  name: "Home",
  components: {
    Child
  },
  data() {
    return {
      value: ""

    }
  },
  watch: {
    value(val) {
      console.log(val)
    }
  },
};
</script>

但是最后我发现这样又一个问题就是我下拉框有的是多选的，然后props需要指出传值的属性，就导致我如果不想再写一个组件这个方法不能兼容。