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>