自定义组件v-model：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同

最新推荐文章于 2024-09-30 10:50:08 发布

古月的博客

最新推荐文章于 2024-09-30 10:50:08 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/qq_34345149/article/details/87862406

版权

上测试代码

      <body>
    <div id="app">
        <my-component v-model="value"></my-component>
        <div>{{value}}</div>
    </div>
    <script>
       var vm = new Vue({
          el: '#app',
          data: {
            value:true, 
          },
          methods:{
           
        },
          components:{
            'my-component':{
                model:{
                    prop:'checked',
                    event:'change'
                },
                props:['checked'],
                template:'<input type="checkbox" v-bind:checked="checked" name="this is name" value="this is value" @change="$emit(\'change\',$event.target.checked)"/>',
                


            }
          }
        })
    </script>
</body>

默认情况下：
自定义组件的v-model等同于v-bind:value="。。"加上v-on:input=“。。”，
在这里插入图片描述
但是对于checkbox表单这显然是不合理的：因为checkbox绑定的是checked属性和change事件，所以我们必须在prop设置的model属性可以修改绑定属性的名字和事件名：

当然 props必须再传一下checked 否则子组件内部无法获取到checked的值；

最后我们可以自己在自组件的input 加上我们想要的name，value值了；
在这里插入图片描述
最终目的就是规避v-model的默认value属性传到我们子组件input标签后跟input的value产生冲突；
例外注意：子组件的input 不要用v-model=“checked”绑定checked的值，要用v-bind:checked=“checked” 前者是动态绑定，一旦我们勾选checkbox就会出现不能覆盖overwritten的报错信息；子组件的绑定是单项的，不能直接修改的，可以用自定义事件$emit修改
在这里插入图片描述