v-model结合model与props在复选框组件上实现双向绑定(本人习惯用单文件组件)
直接上代码
//这是父组件的代码
<template>
<div class="homeView">
<base-checkbox v-model="study"></base-checkbox>
</div>
</template>
<script>
//引入子组件
import BaseCheckbox from './BaseCheckbox'
export default {
name: "HomeView",
//注册子组件
components: {
BaseCheckbox
},
data() {
return {
//定义v-model属性初值,false即,开始为非选中状态,
study: false
}
},
created() {
this.$nextTick( () => {
console.log(this.study);
})
},
watch: {
study: {
handler: function (study) {
if (study) {
console.log("此时是选中状态,study值为:" + study)
}else {
console.log("此时是非选中状态,study值为:" + study)
}
},