如何优雅的在嵌套组件中都使用v-model

说来惭愧，子组件使用了v-model，同时父组件也使用v-model，这个问题其实困扰了我很久。很久以前我就遇到过这个问题，而且发现这个不好实现。当时我采取的是回避的做法，毕竟也没有规定组件就一定要用v-model😂，但心里一直觉得自定义组件使用v-model更优雅，用起来更方便。
这次我希望找到一个实现的方案。

方案

我想使用computed来实现是一种比较优雅的方案

在这个例子中，一开始父组件往子组件传入值：‘父组件传入的初始值’，并在el-input中显示出来，1秒后父组件会修改变量值为：‘父组件修改myInput的值’,可以看到子组件的值和input中的值都得以更新，而我直接在input中输入值时，子组件和父组件的变量值也得到了更新，实现了值的双向传递。

<template>
  <div>
    <el-input v-model="input"
              placeholder="请输入内容"></el-input>
    <p>子组件中变量input的值是:{{input}}</p>
  </div>

</template>

<script>
export default {
  name: 'DemoComponent',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      required: true
    }
  },
  computed: {
    input: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('change', val)
      }
    }
  }
}

</script>

<style lang="scss" scoped>
</style>

那么引用它的父组件就只需要：

<template>
  <div class="wrap">
    <DemoComponent v-model="myInput"></DemoComponent>
    <p>父组件的变量myInput值是:{{myInput}}</p>
  </div>
</template>

<script>
import DemoComponent from './DemoComponent'
export default {
  components: {
    DemoComponent
  },
  data () {
    return {
      myInput: '父组件传入的初始值'
    }
  },
  created () {
    setTimeout(() => {
      this.myInput = '父组件修改myInput的值'
    }, 2000)
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  margin: 20px auto;
  width: 400px;
}
</style>