使用v-model双向绑定子组件

在项目中经常会遇到子组件向父组件传递值的情况。例如封装一个ih-input组件，需要把他的值传递给父组件，通常的做法是利用$emit去触发某一事件，把值作为参数传递出去。这种做法是最基本的，但不好的就是在父组件中需要写一个方法作为事件的调用，用起来觉得繁琐！还有一个更干脆的办法就是利用v-model，在父组件中声明一个变量，直接绑定子组件，无需再去另写方法接收，如下：

<template>
    <ih-input v-model="content" type="text"></ih-input>
</template>

<script>
    export default {
        data(){
            return {
               content:""
            }
        }    
    }
</script>

v-model原理

要想实现上述方法，必须先要弄懂v-model的原理。v-model实际上是一个语法糖：

<input v-model="content"/>
<input :value="content" @input="content = $event.target.value" />

上面两者是同一个意思,可以把上面当作下面的简写。h5中，input元素中新增了input事件，当输入文本时就会触发。v-model会将content跟默认属性value绑定，并把它作为input事件的接收对象。当改变content时，就改变了input元素的value属性，在input元素中直接输入时，触发input事件，value传递给content，到这里其实就很简单了，ih-input组件代码：

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

<script>
    export default {
        props:{
            value:{
                type:String,
                default:""
            }
        },
        data(){
            return {
                
            }
        },
        computed:{
            text:{
                get(){
                    return this.value;
                },
                set(value){
                    this.$emit("input",value);
                }
            }
        }
    }
</script>

当ih-input绑定content时，通过props传递进来（此时ih-input内部this.value = content）。ih-input内部定义计算属性text并绑定在input元素上，getter接收了value（this.text = this.value = content），input元素value变成content。当input元素输入时，value发生改变，修改计算属性text，触发set(),回到开头的$emit,触发v-model默认的input事件，content = $event.target.value,修改父组件数据。

其他的任意组件都可以通过这样实现，核心思想都是组件内部利用$emit触发input事件往外传递数据。例如网络请求响应提示，登录成功提示框显示2秒后隐藏，父组件可以绑定一个Boolean值，默认false，在子组件内最外层利用v-if控制。登录成功，父组件内修改Boolean为true，子组件内部created钩子触定时器发，2秒后往外传递修改为false，隐藏子组件。利用props虽然同样可以实现，相比之下利用props的话，就两种情况：1，子组件内部用$emit触发父组件事件，父组件内部则需多定义一个方法作为事件的调用去修改该Boolean值；2，在登录请求成功时修改为true，同时定义定时器，两秒后再次修改为false。无论哪一种都导致了开始的那个问题--繁杂冗余，有违组件化思想，自己的事情自己做，而利用v-model只需要在必要时改false为true即可，其他操作均在子组件内部完成。