1、创建VModelCheckbox组件,代码如下:
<template>
<div>
<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" /> Checkbox
</div>
</template>
<script>
export default {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean,
default: false
}
}
}
</script>
2、引用VModelCheckbox组件,代码如下:
<template>
<div>
{{ modelCheckboxChecked + '' }}
<v-model-checkbox v-model="modelCheckboxChecked"></v-model-checkbox>
</div>
</template>
<script>
import VModelCheckbox from '@/components/VModelCheckbox'
export default {
components: {
VModelCheckbox
},
data () {
return {
modelCheckboxChecked: true
}
}
}
</script>