上测试代码
<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修改
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
