对应文档节点: https://vuefe.cn/v2/guide/components.html#Customizing-Component-v-model
<body>
<div id="app">
<label>父节点</label>
<input type='checkbox' v-model='enable'>
<br/>
<label>子节点</label>
<!--以下两种方式效果一致-->
<input-checkbox v-model='enable'></input-checkbox>
</input-checkbox>
<!--<input-checkbox :checked="enable" @change="updateValue">
</input-checkbox>-->
</div>
</body>
<script>
Vue.component('input-checkbox', {
// 声明 props
model: {
prop: 'checked',
event: 'change'
},
props: ['checked'],
template: `
<span>
<input
type='checkbox'
v-bind:checked="checked"
v-on:change="updateValue($event.target.checked)">
</span>
`,
methods: {
updateValue: function (value) {
//debugger
this.$emit('change', value)
}
}
}); new Vue({
el: "#app",
data: {
enable: true
},
methods: {
updateValue: function (value) {
//debugger
this.enable = value;
}
}
});
</script>