vue官方文档给出，递归组件介绍
image.png
但是如何使用，以及实际应用的案例网上很少出现，今天介绍一下工作中遇到的问题，以及使用方法
1，应用递归组件遍历树形题目
image.png
需求：有多种类型的题目，有多级题目。分别根据类型显示不同题目
2, 后端给的结构
{
"data":{
"cause_id":1,
"id":3,
"name":"相识结婚",
"node_id":1,
"points":[
{
"id":19,
"level":1,
"module_id":3,
"must":false,
"name":"二人相识方式",
"reasons":[
{
"has_sub_reason":true,
"id":19,
"level":1,
"name":"经人介绍",
"point_id":19,
"status":1,
"type_op":1
},
{
"has_sub_reason":false,
"id":20,
"level":1,
"name":"自由恋爱",
"point_id":19,
"status":1,
"type_op":1
},
{
"has_sub_reason":false,
"id":21,
"level":1,
"name":"婚恋网站",
"point_id":19,
"status":1,
"type_op":1
}
],
"status":1,
"type":1,
"type_op":0
},
{
"id":20,
"level":1,
"module_id":3,
"must":false,
"name":"请问您是否存在受胁迫结婚的情形？",
"reasons":[
{
"has_sub_reason":true,
"id":22,
"level":1,
"name":"是",
"point_id":20,
"status":1,
"type_op":1
},
{
"has_sub_reason":false,
"id":23,
"level":1,
"name":"否",
"point_id":20,
"status":1,
"type_op":1
}
],
"status":1,
"type":1,
"type_op":0
},
{
"id":21,
"level":1,
"module_id":3,
"must":false,
"name":"双方之间是否进行了结婚登记？",
"reasons":[
{
"child_node":[
{
"id":1,
"level":2,
"must":false,
"name":"双方是再婚吗？",
"parent_reasons_id":24,
"reasons":[
{
"has_sub_reason":true,
"id":1,
"level":2,
"name":"原告再婚",
"point_id":1,
"status":1,
"type_op":1
},
{
"has_sub_reason":true,
"id":2,
"level":2,
"name":"被告再婚",
"point_id":1,
"status":1,
"type_op":1
},
{
"has_sub_reason":false,
"id":3,
"level":2,
"name":"双方系再婚",
"point_id":1,
"status":1,
"type_op":1
}
],
"status":1,
"type":1,
"type_op":0
},
{
"id":2,
"level":2,
"must":false,
"name":"结婚登记日期为？",
"parent_reasons_id":24,
"reasons":[
{
"description":"请选择结婚登记日期为？",
"has_sub_reason":false,
"id":4,
"level":2,
"name":"结婚登记日期为？",
"point_id":2,
"status":1,
"type_op":1
}
],
"status":1,
"type":3,
"type_op":0
}
],
"description":"",
"has_sub_reason":true,
"id":24,
"level":1,
"name":"是",
"point_id":21,
"status":1,
"type_op":1
},
{
"has_sub_reason":false,
"id":25,
"level":1,
"name":"否",
"point_id":21,
"status":1,
"type_op":1
}
],
"status":1,
"type":1,
"type_op":0
}
],
"status":1
},
"message":"",
"status":200,
"success":true
}
3, 前端代码展示
image.png
首先解释一下，RadioComponent，CheckComponent等组件设置成全局组件，form_item.type===1 为题目类型，为1 时为单选按钮组件显示。其他如同。
这里组件用的时iview-design :prop="points.${form_index}.reasons"为设置是否必填，根据must判断的。
此页面所有代码为
{{word_item.title}}：
{{word_item.content}}
4，只写其中一个单选的例子，其他类似
image.png
image.png
image.png
radio组件所有代码如下
其他组件类似
5，这样就会出现效果，其中有一个三级城市组件给的数据不符合要求，组件需要label 和vaule 现在给的是name, id所以需要转一下，用到递归函数
handleCity: function (tree) {
for (let i = 0; i < tree.length; i++) {
tree[ i ].label = tree[ i ].name;
tree[ i ].value = tree[ i ].id;
tree[ i ].reason_id = tree[ i ].id;
if (tree[ i ].children && tree[ i ].children.length > 0) {
this.handleCity(tree[ i ].children)
}
}
return tree
},
6，全篇有个知识点这里有个 子组件用 this.$emit('input', selectedData)，
组件调用 使用
组件调用使用v-model 接受改变过的值
vue中子组件不能直接改变通过props 传过来的值的会报错
image.png
这里没有找到好方法，只能屏蔽警告提示，不影响效果
Vue.config.warnHandler = function (msg) {
if (!msg.includes('Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.')) { // uniApp bug: https://ask.dcloud.net.cn/question/71966
return console.warn && console.warn(msg)
}
}
至此vue递归组件遍历不同类型不同级别的题目问题写好了。
如果喜欢欢迎点赞留言，关注本人维护的公众号---- 程序员蜗牛，有免费学习资料赠送//