介绍 & lt; template>
& lt; div类=癱heckBoxCard"祝辞
& lt; div:阶级=?”框${检查,,& # 39;boxCheck& # 39;}’“updateData @click=凹觳?)()“比;
{{名称}}
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“checkBoxCard",
道具:{
名称:字符串,
checkIndex: {
类型:数字,
默认值:空,
},
},
数据(){
返回{
收音机:0,
检查:假的,
radioName:““,
列表:[],
};
},
方法:{
检查(){
如果这一点。无线电==1){
这一点。检查=false;
这一点。无线电=0;
如果(这其他}。无线电==0){
这一点。检查=true;
这一点。无线电=1;
}
},
updateData () {
如果这一点。无线电==1){
这一点。radioName=this.name;
如果(这其他}。无线电==0){
这一点。radioName=?“;
}
这个。发出(“updateSurveyData",这美元。radioName this.checkIndex);
},
},
安装(){},
创建(){},
};
& lt;/script>
& lt;风格lang=皊css"scoped>
.checkBoxCard {
margin-right: 15 px;
显示:inline-block;
margin-top: 10 px;
}
.boxCheck {
颜色:rgba(183年,37岁,37岁,1);
背景:浓汤;
}
.box {
边界:0.55 px固体# eee;
填充:5 px 10 px;
字体大小:3.73333大众;
border - radius: 10 px;
}
& lt;/style> & lt; template>
& lt; div类=癱heckBox"祝辞
& lt; div类=皌itle"祝辞
选择
& lt;/div>
& lt; div类=癱ard"祝辞
& lt; CheckBoxCard
v代表=發ist"项目;
:关键=癷tem.value"
:name=? item.name"
:checkIndex=癷tem.value"
@updateSurveyData=皍pdateSurveyData"/比;
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
从“进口CheckBoxCard。/checkBoxCard";
出口默认{
名称:“checkBox",
组件:{
CheckBoxCard,
},
数据:函数(){
返回{
列表:(
{值:0,名字:“选1项“},
{价值:1、名称:“选项2“;},
{值:2,名字:“选3项,},
{值:3,名字:“选第四项“},
{值:4,名字:“选5项“},
{值:5,名字:“选项6“;},
{值:6,名字:“其他“},
]，
名称:““,
检查表:[],
};
},
方法:{
updateSurveyData(问题,指数){
这一点。清单(指数)=问题;
console.log (this.checkList.filter ((x)=比;x !=啊?);
console.log (this.checkList.filter ((x)=比;x !=啊? . join ());
},
},
创建(){},
};
& lt;/script>
& lt; scoped>风格;
.checkBox {
填充:5.33333大众4大众;
边界底部:0.55 px固体# eee;
背景:白色;
}
.title {
text-align:左;
颜色:# 323233;
字体大小:3.73333大众;
padding-bottom: 10 px;
行高:30 px;
}
& lt;/style>
在Vue如何使用自定义多选组件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<强>子组件(选项卡)
checkBoxCard。vue
<强>父组件
复选框。vue
效果图
看完上述内容,你们掌握在Vue如何使用自定义多选组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
