vue组件递归

概念

组件可以通过 export default 的name 属性进行自己调用自己，形成递归组件。

使用

为了防止递归出现死循环，必须有一个结束条件。根据自己的需求可以使用 v-if 进行对应的条件判断
以下是我的一段数据：

[
 {
        "_class" : "ops.pojo.vo.StorageMapperings",
        "datas" : [ {
          "HostIp" : "192.168.2.130",
          "listenting" : [ {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "2181"
          }, {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "2888"
          }, {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "3888"
          } ],
          "StopCommand" : "systemctl stop zookeeper",
          "Owner" : "devops",
          "StartScript" : "/home/devops/zookeeper/bin/zkServer.sh",
          "StopScript" : "/home/devops/zookeeper/bin/zkServer.sh",
          "StartCommand" : "systemctl start zookeeper",
          "MainPath" : "/home/devops",
          "SoftType" : "MiddleWare",
          "OwnerGroup" : "devops",
          "version" : "zookeeper-3.4.10",
          "SoftName" : "zookeeper"
        }, {
          "HostIp" : "192.168.2.131",
          "listenting" : [ {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "2181"
          }, {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "2888"
          }, {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "3888"
          } ],
          "StopCommand" : "systemctl stop zookeeper",
          "Owner" : "devops",
          "StartScript" : "/home/devops/zookeeper/bin/zkServer.sh",
          "StopScript" : "/home/devops/zookeeper/bin/zkServer.sh",
          "StartCommand" : "systemctl start zookeeper",
          "MainPath" : "/home/devops",
          "SoftType" : "MiddleWare",
          "OwnerGroup" : "devops",
          "version" : "zookeeper-3.4.10",
          "SoftName" : "zookeeper"
        }, {
          "HostIp" : "192.168.2.132",
          "listenting" : [ {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "2181"
          }, {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "2888"
          }, {
            "targetIP" : "0.0.0.0",
            "protoType" : "tcp",
            "port" : "3888"
          } ],
          "StopCommand" : "systemctl stop zookeeper",
          "Owner" : "devops",
          "StartScript" : "/home/devops/zookeeper/bin/zkServer.sh",
          "StopScript" : "/home/devops/zookeeper/bin/zkServer.sh",
          "StartCommand" : "systemctl start zookeeper",
          "MainPath" : "/home/devops",
          "SoftType" : "MiddleWare",
          "OwnerGroup" : "devops",
          "version" : "zookeeper-3.4.10",
          "SoftName" : "zookeeper"
        } ],
        "mid" : "85d0c34cf09649cca2adf622bae44b57",
        "data" : { },
        "name" : "流程组件",
        "moduleName" : "软件安装"
      },
]

实例

首先，创建一个组件作为调用递归组件的父组件

<div class='content mmm_request' v-if='show_info'>
   <parameter :parameterData='detailData.info.request'></parameter>
</div>
import parameter from "./recursive.vue";
export default {
  data() {
    return {
      //该对象为后端传递的数据，detailData.info.request为上面列出是实际数据
      detailData: {},
    };
  },
 }

<parameter / >就是递归组件，实际使用时将数据通过 props 传入即可

<template>
    <div class='mmm_cmdb_converter_history_parameter' :class="{'isText':typeof(parameterData)=='string'}">
        <div v-if='Object.prototype.toString.call(parameterData) === "[object Object]"'>
            {
            <div v-for=' (val,key,index) in parameterData ' :key='index '>
                <span class='json_key' :title='key'>{{key}} :</span>
                <recursive :parameterData='val'></recursive>
            </div>
            },
        </div>
        <span v-else class='json_val'>
            {{parameterData}},
        </span>
    </div>
</template>
<script>
export default {
    name: 'recursive',
    data() {
        return {
        }
    },
    props: ['parameterData'],
    created() {

    },
    mounted() { },
    components: {},
    methods: {},
    watch: {},
}
</script>

效果图