一、文档及vue2中 v-model 使用方法

首先，我们看一下 v-model 的API，vue2 的文档截图如下；

可以得知，v-model 仅在一些表单控件和组件上生效。这里我们只讨论组件。

在组件上创建双向绑定指的就是：父组件参数变化，子组件参数也要变化；子组件参数变化，父组件参数也变化。（这也是 v-model 的使用场景）

在参考链接2中，对v-model 进行了解释：

这里解释了 v-model 的使用方法、v-model 和输入控件可能存在的冲突，以及为了避免冲突，所推荐的 v-model 使用方法。

1、v-model的使用方法

子组件通过定义死的 prop 名称”value“接受父组件的传参，并在这个参数变化的时候，通过emit 向上抛出 input 事件来改变父组件中的参数变化。

父组件：

<Parent v-model="text" />

子组件：

 //子组件
<template>
    <div>
        <input type="text" @input="change" :value="value">
    </div>
</template>
 
<script>
export default {
    props:["value"],
    data(){
        return{}
    },
    methods: {
        change(e){
            this.$emit('input',e.target.value);
        },
    },
}
</script>

2、 v-model 和输入控件可能存在的冲突

我理解可能存在的冲突是下面这个：要求value 和name 传的一致，那有可能出现，不能命名为value 的特殊情况。

3、推荐的v-model的使用方式

通过显示定义 prop 为value ，并向上emit input 事件，使v-model 生效这一方式存在潜在的风险。

所以，vue 定义了另外一种语法，来使v-model生效。

父组件形式不变：

<Parent v-model="text" />

子组件：

 //子组件
<template>
    <div>
        <input type="text" @input="change" :value="checked">
    </div>
</template>
 
<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
    props:['checked'],
    data(){
        return{}
    },
    methods: {
        change(e){
            this.$emit('input',e.target.value);
        },
    },
}
</script>