With the development of technology, the complexity of development is getting higher and higher. The traditional development method makes a system into a whole application. It often happens that a small change or the addition of a small function may cause the overall logic to change. The modification affects the whole body. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. Greatly improve low development efficiency and reduce maintenance costs.
Componentization is the only way for any front-end application with complex business scenarios and products after multiple iterations. Componentization requires more than just the module splitting and decoupling seen on the surface. There is also a lot of work behind it to support componentization, such as module splitting strategies based on business characteristics, interaction methods between modules, and building systems. etc.
The components introduced in this article are:
Quickly implement the vue uni-app front-end's latest support for four-level and below structures, imitating the equity structure of Qichacha and Tianyancha's affiliated investment institutions tree tree structure holding structure. To download, please visit the uni-app plug-in market: the front-end's latest support for four-level and below structures The equity structure of the affiliated investment institutions of Fengqi Chacha and Tianyancha is a tree-shaped holding structure - DCloud plug-in market front-end newly supports four-level and below structures The component is used to display the affiliated investment structure, equity structure, tree structure, holding structure 
https://ext.dcloud.net.cn/plugin?id=14827
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
# Front-end imitation enterprise Chacha, Tianyancha affiliated investment institutions equity structure tree structure holding structure
#### How to use
```How to use
<!-- treeName: Theme name of the tree structure treeData: The filling data of the tree structure -->
<CCBCashTree v-if="(curTreeName.length > 0)" :treeName="curTreeName" :treeData="curTreeData" >
</CCBCashTree>
```
#### HTML code part```html
<template>
<
view class="content">
<!-- treeName: the theme name of the tree structure treeData: the filling data of the tree structure -->
<CCBCashTree v-if ="(curTreeName.length > 0)" :treeName="curTreeName" :treeData="curTreeData">
</CCBCashTree>
</view>
</template>
```#### JS code (introducing component filling data)
```javascript
<script>
import CCBCashTree from '@/components/CCBCashTree.vue'export default {
components: {
CCBCashTree
},
data() {
return {
title: 'Hello',
curTreeName: '',
curTreeData: []
}
},
onLoad() {
this.curTreeName = "Guangzhou Automobile Group Co., Ltd.";let tmpArr = [];
for (let i = 0; i < 4; i++) { // Simulate corporate holding data let s = { 'ratio': '20%', 'amount': '10 million', 'label ': 'Guangzhou｜Advanced Manufacturing｜High Technology', 'investName': 'Guangzhou Automobile Industry Group Co., Ltd.' + i, 'investType': '0', 'invests':[{'ratio': '20%' , 'amount': '1000 million', 'label': 'Guangzhou | Automobile | High-tech', 'investName': 'GAC Toyota Co., Ltd.', 'investType': '0',}, {'ratio': '10%', 'amount': '90000万',
'label': 'Guangzhou | Industry | High-tech',
'investName': 'China National Machinery Industry Group Co., Ltd.',
'investType': '0',},
{'ratio': '10%',
'amount': '9 million',
'label': 'shareholder',
'investName': 'Zeng Qinghong',
'investType': '1',},
{'ratio': '10%',
'amount': '9 million',
'label': 'Shareholder',
'investName': 'Wu Song',
'investType':'1',}]
};
let tmpDict = Object.assign(s, { "isOpen": false
});
tmpArr.push(tmpDict);
}
// Simulate personal holding data
let t = { 'ratio': '10%', 'amount': '9 million', 'label': 'shareholder', 'investName' : 'Zeng Qinghong', 'investType': '1', 'invests':[] }; let tmpDict = Object.assign(t, { "isOpen": false }); tmpArr.push(tmpDict);
this.curTreeData = tmpArr;
},
methods: {}
}
</script>
```#### CSS
```CSS
<style>
page{
background-color: #f6f6f6;
}
.content {
display: flex;
flex-direction: column;}
</style>
```