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:
The front-end Vue is very simple and practical, with a product classification display component and a side product classification component. To download the complete code, please visit the uni-app plug-in market address: https://ext.dcloud.net.cn/plugin?id=13084
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
#### Instructions
```How to use
<!-- flist: first-level array slist: second-level array tlist: third-level array @click: click event Note: the next level pid is associated with the upper level id -->
<cc-categorizeView :flist="flist" :slist="slist" :tlist="tlist" @click="navToList"></cc-categorizeView>
```
#### HTML code part
```html
<template>
<view class="content">
<!-- flist: first-level array slist: second-level array tlist: third-level array @click: click event Note: the next level pid is associated with the upper level id -->
<cc-categorizeView :flist="flist" :slist="slist" :tlist="tlist" @click="navToList"></cc-categorizeView>
</view>
</template>
```
#### JS code (introducing components to fill in data)
```javascript
<script>
export default {
data() {
return {
flist: [],
slist: [],
tlist: [],
}
},
onLoad() {
// this.loadData();
this.flist = [{
id: 1,
name: 'Mobile phone digital'
},
{
id: 2,
name: 'Gift flowers'
}
];
//pid is the parent id, //those without pictures are level 2 classifications
this.slist = [{
id: 5,
pid: 1,
name: 'Mobile phone communication'
},
{
id: 6,
pid: 1,
name: 'operator'
}, {
id: 17,
pid: 2,
name: 'gift',
},
{
id: 18,
pid: 2,
name: 'Flowers',
},
];
//Level 3 classification pid is the id corresponding to the parent level
this.tlist = [{
id: 8,
pid: 5,
name: 'full screen phone',
picture: 'https://cdn.pixabay.com/photo/2014/08/05/10/30/iphone-410324_1280.jpg'
},
{
id: 9,
pid: 5,
name: 'Game phone',
picture: 'https://cdn.pixabay.com/photo/2016/12/09/11/33/smartphone-1894723_1280.jpg'
},
{
id: 10,
pid: 5,
name: 'Elderly Machine',
picture: '/static/temp/cate1.jpg'
},
{
id: 11,
pid: 5,
name: 'camera phone',
picture: 'https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg'
},
{
id: 12,
pid: 5,
name: 'Female mobile phone',
picture: '/static/temp/cate5.jpg'
},
{
id: 14,
pid: 6,
name: 'Contract Machine',
picture: 'https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg'
},
{
id: 15,
pid: 6,
name: 'Choose a good card',
picture: '/static/temp/cate4.jpg'
},
{
id: 16,
pid: 6,
name: 'Package package',
picture: '/static/temp/cate5.jpg'
},
{
id: 19,
pid: 17,
name: 'Public Welfare Ornaments',
picture: '/static/temp/cate7.jpg'
},
{
id: 20,
pid: 17,
name: 'Creative Gift',
picture: '/static/temp/cate8.jpg'
},
{
id: 21,
pid: 18,
name: 'Flowers',
picture: '/static/temp/cate9.jpg'
},
{
id: 22,
pid: 18,
name: 'Flower every week',
picture: '/static/temp/cate10.jpg'
},
{
id: 23,
pid: 18,
name: 'Cartoon Bouquet',
picture: '/static/temp/cate11.jpg'
},
{
id: 24,
pid: 18,
name: 'Eternal Flower',
picture: '/static/temp/cate12.jpg'
},
];
},
methods: {
navToList(page, time) {
uni.showModal({
title: 'Warm reminder',
content: 'Click entry = second level sid = ' + sid + ' third level tid = ' + tid
})
}
}
}
</script>
```
#### CSS
```CSS
<style lang='scss'>
page,
.content {
height: 100%;
background-color: #f8f8f8;
}
</style>
```