对应文档节点: 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>