Vue自定义组件的model属性例子

今天看vue的官方教程 **自定义事件**  中的  **自定义组件的 v-model**时，没看明白，然后百度了好些资料，终于弄明白了。

1、v-model语法糖

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
例如下面的例子就实现了变量value和输入值的双向绑定：

<div id="example-1">
     <input v-model="value">
</div>


new Vue({
     el: '#example-1',
     data: {
          value: ''
     }
})

对于上述使用了v-model的input，它相当于如下实现：

<input type="text" 
　　　:value="value" 
　　　@input="value=$event.target.value">

2、自定义输入组件中的v-model

Vue.component("my-input", {
    template: "<input type='text'>"
})

<div id="example-2">
     <my-input v-model="value" />
</div>

new Vue({
     el: '#example-2',
     data: {
          value: ''
     }
})

 对于上述的自定义组件代码，我们想通过v-model实现双向数据绑定，却没有效果。

如何实现？这就要我们的model属性出场了...

3、model属性实现自定义组件的双向数据绑定

Vue.component("input_test",{
            model:{
                prop:'value',
                event:'input-value'
            },
            template : `
               <input type="text" v-bind:value="value" v-on:input="$emit('input-value', $event.target.value+' <<==')"/>
            `
        })


<div id="input_test_demo">
            <span style="color:red">{{value}}</span>
            <input_test v-model="value"></input_test>
        </div>


new Vue({
                el: "#input_test_demo",
                data: {
                    value: "请输入:"
                }
            })

 通过上面的3段代码，就实现了在自定义组件中使用v-model来进行双向数据绑定。结果如下所述：

实现双向绑定的关键代码就是定义model属性中的prop和event，v-model中的值传递给model属性中的prop对应的变量。然后在自定义组件中选择一个要传递出去值的基本组件，通过$emit发送event事件并传递一个结果值，这样外部的v-model就收到了传出的值，因此就实现了双向传递。

这时的input_test中的v-model实际代码，就如同下面的代码形式，其中函数参数val的值就是上面的$emit传出来的：

<input_test
  v-bind:value="value" 
  v-on:input-value="function(val) { return value = val }"   
</input_test>

参考文章如下：

https://blog.csdn.net/weixin_41796631/article/details/83038198

https://www.cnblogs.com/wind-lanyan/p/7899428.html