Vue中自定义组件的v-model（input数据双向绑定）

Vue中的v-model一般用于input标签中的数据双向绑定。
常见的使用方法为：

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

但是如果input标签是由自定义组件渲染出来的，那么v-model就不起效果了。
如果让其有效，代码如下：

    <div id="app">
        <mycom v-on:input="bdbd"></mycom>
        <p>内容是{{msg}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                msg:''
            },
            components:{
                'mycom':{
                    template:'<input type="text" v-on:input="oninput">',
                    methods:{
                        oninput(e){
                            var value = event.target.value;
                            //console.log(value);
                            this.$emit('input',value)
                        }
                    }
                }
            },
            methods:{
                bdbd(value){
                    this.msg = value;
                }
            }
        })
    </script>

1、实例一个Vue,添加自定义组件mycom，并设置相应的模板。
2、模板中触发input事件，并在methods中添加方法，使input事件触发式，获取value的值。
3、使用$emit触发input事件，参数是刚才获取到的value
4、实例中的methods中添加方法，让实例中的msg等于刚才获取到的value。