vue自定义组件实现v-model

vue版本：vue2
开发时有时候我们会遇到这种场景，父子组件之间的数据传递，一般都是通过在子组件定义prop向子组件传递数据，但是有时候子组件也会更改传递下来的属性，但是这在vue中是不被允许的。所以我们可以通过定义v-model实现父子组件的数据相互传递和修改。

子组件代码

<template>
  <div>
    输入内容后，将会同时修改父组件传递的值
    <input :value="value" @input="handleInput"></input>
  </div>
</template>
<script>
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: ''
  },
  data() {
    return {}
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value)
    }
  }
}
</script>
<style scoped lang="scss">

</style>

注意：

1. 如果子组件的属性名为value，那么model中的prop可以省略；同时如果$emit事件为input，那么model中的event也可以省略。当前代码中，其实可以把model给省略掉
2. 子组件的props属性和model的prop值要保持一致，同时$emit事件和model的event值保持一致。根据这个原则，你可以自定义属性和事件名

此处有个问题，有的人在子组件使用如下代码

<input type="text" v-model="value" />

不出现错误吗？反正我使用后出现了错误

暂时不管，反正我能跑就好

父组件代码

    <child v-model="formData"></child>
  data(){
    return {
      formData:'你好',
    }
  },