本文主要是介绍Vue Form父组件和多选按钮input checkbox之间的数据双向绑定数据共享，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Vue CLI方式
- 父组件传数据给子组件，在子组件中改变数据的一些属性后父组件对应的数据也一同改变。
- 子组件和父组件之间的数据双向绑定
父组件
//Form.vue
<template>
<div class="show"><h2>This is form elements-input type checkbox</h2>
<div class="quiz-checkbox"><h2>quiz checkbox</h2><checkbox v-for="(item) in checkboxQuizList" v-model="item.isChecked" :key="item.key" :checkboxName="checkboxNamQquiz" :checkboxJson="item" @change="checkboxChangeA" @selfChangeA="selfCheckboxChangeA"></checkbox><h2>quiz checkbox B</h2><CheckboxB v-for="item in checkboxQuizListB" :checkboxID="item.key" :key="item.key" :checkboxName="checkboxNamQquizB" :checkboxJson="item"></CheckboxB></div><input type="button" value="提交答案" v-on:click="getCheckboxData()"/></div></template><script>
import ButtonCounter from '../components/button/ButtonCounter.vue';
import checkbox from '../components/form/checkbox.vue';
import CheckboxB from '../components/form/CheckboxB.vue';
export default{name: "Show",mounted() {window.console.log(this.checkboxQuizList);},data() {return{checkboxNamQquiz: 'quiz',checkboxNamQquizB: 'quizB',isChecked: true,checkboxQuizList: [{'title':'A','isChecked':false,'key':'keyA1'},{'title':'B','isChecked':false,'key':'keyA2'},{'title':'C','isChecked':false,'key':'keyA3'}],checkboxQuizListB: [{'title':'A','isChecked':false,'key':'keyB1'},{'title':'B','isChecked':false,'key':'keyB2'},{'title':'C','isChecked':false,'key':'keyB3'},{'title':'D','isChecked':false,'key':'keyB4'}]}},components:{ButtonCounter,checkbox,CheckboxB},methods:{clickNow: function(){window.console.log(22222,this);},getCheckboxData: function(){window.console.log(this.checkboxQuizList,"<br/>");},checkboxChangeA: function(e){window.console.log(3334,e);},selfCheckboxChangeA: function(e){window.console.log(3335,e)}}
}
</script><style>
</style>子组件
Checkbox.bue
<template><label><input type="checkbox" :name="checkboxName" @change="checkboxChange($event)">{{checkboxJson.title}}</label>
</template><script>
export default{name: "formCheckbox",model:{prop: 'checked',event: 'change'},props:{checked: Boolean,checkboxJson: {type: Object},checkboxID:{type: String,default: "",},checkboxName:{type: String,default:""}},data(){return{countClick: 0,}},mounted(){window.console.log(333333,this.checkboxJson);},methods:{checkboxClick: function(){this.countClick++;this.$emit('clickNow', this.countClick)},checkboxChange: function(e){window.console.log(22223,e.target.checked);this.$emit('change', e.target.checked)// this.checkboxJson.isChecked = e.target.checked// this.$emit('selfChangeA',e.target.checked)}}
}
</script><style scoped lang="less">
.checkbox-div{position: relative; height: 30px;}
.checkbox-div{input[type='checkbox']{ opacity: 0; width: 20px; height: 20px;}label{width: 20px; height: 20px; border: 1px solid red; position: absolute; left: 0px;font-size: 16px; text-align: center;}input:checked+label{border: 1px solid green;}input:checked+label:after{content: "√";color:red;}
}
</style>子组件CheckboxB
<template><label><input type="checkbox" :id="checkboxID" :name="checkboxName" v-on:change="checkboxChange($event)">{{checkboxJson.title}}</label>
</template>
<script>
export default{name: "formCheckbox",props:{checkboxJson: {type: Object},checkboxID:{type: String,default: "",},checkboxName:{type: String,default:""}},data(){return{}},mounted(){console.log('this is checkboxJson',this.checkboxJson);},methods:{checkboxChange: function(e){this.checkboxJson.isChecked = e.target.checked//this.$emit('change', this.checkboxJson.isChecked)}}
}
</script><style scoped lang="less">
.checkbox-div{position: relative; height: 30px;}
.checkbox-div{input[type='checkbox']{ opacity: 0; width: 20px; height: 20px;}label{width: 20px; height: 20px; border: 1px solid red; position: absolute; left: 0px;font-size: 16px; text-align: center;}input:checked+label{border: 1px solid green;}input:checked+label:after{content: "√";color:red;}
}
</style>这篇关于Vue Form父组件和多选按钮input checkbox之间的数据双向绑定数据共享的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
