项目容器组件，找了资料，都没有容器组件一个明确的定义，我就按照自己的理解说一下哈,最后总结了几个点，不知道对不对，如果有不对的地方，欢迎指教
容器化组件与组件区别：
容器化组件
- 展示和容器组件更好的分离，有助于更好的理解应用和UI
- 重用性高，展示组件可以用于多个不同数据源；
- 简化项目，让项目更加清晰
组件 - 既存在应用数据的读取和处理，又存在数据的显示，组件复用率不高。
使用的场景（这里是从组件角度思考）
1，常见的组件封装，大家应该都清楚，这里我就不详细介绍了
注：如果组件的利用率较高，我们可以把里面的方法抽出一个文件，专门写公共方法，例如：table切换页面事件等
2，把前端自定义的一些字典属性，全部统一封装起来
- dict.js
export default {
finishedList: [
{
value: '',
label: '全部1'
},
{
value: 'true',
label: '已完成2'
},
{
value: 'false',
label: '进行中3'
}
]
}
- main.js，在vue原型上，加上字典属性
import dict from '@/api/dict.js'
Vue.prototype.$dict = dict
- 引用的页面
<listSelect
title="流程状态123"
:finished-list="$dict.finishedList"
v-model="searchCondition.finished"
placeholder="请选择流程状态"
@search="searchChange"
></listSelect>
3，把前端调用后端的一些字典属性，全部统一封装起来
当字典接口统一，通过type进行区分时
/**
* 调接口，把data赋值给一个dictData数组变量
* dictData存储在vuex中
* 当页面调用时，封装方法，进行调用不同的字典数据，进行展示
*/
export function procdefType (data, type) {
return data.filter(val => {
return val.type === type
})[0].values.map(val => {
return {
value: val.key,
label: val.value
}
})
}
当字典接口不统一时
- config.js
注：接口封装，要和后端进行沟通，把所有的接口都统一了，唯一变动的是流程中每个某块的名字
import http from '@/utils/http'
import { SERVER_PREFIX } from '@/configs'
/**
* 接口list的封装
* @key 接口地址
* @condition 搜索条件
* @pager 传参的页码数据
*/
export const fetchList = (key, condition, pager) => {
if (!key) { // $message是在其他地方定义的
return this.$message('缺少key值')
}
var url = `${SERVER_PREFIX}/${key}/list`
return http.get(url, { condition, pager })
}
Vue.prototype.$api = {
fetchList, // 此处只以list接口为案例
...... // 其他删除，详情页，新增等接口封装
}
export const getNameKey (type) {
var res = {}
switch (type) { // 返回改类型的后端接口
case 'book': // 图示
return 'bookName'
default:
return 'name'
}
}
export const format(item, type, params = {}) {
var res = {
...item,
name: item[getNameKey(type)] || item.name,
raw: { ...item }
}
return res
}
- 调用页面
<template>
<list-select
can-input
v-model="value"
ref="list"
:data="list"
:placeholder="getPlaceHolder()"
@search="fetch"
/>
</template>
<script>
import ListSelect from '@/components/list-select'
import mapper from '@/utils/mapper'
export default {
components: {
ListSelect：'list-select'
},
props: {
type: null,
placeholder: String
},
watch: {
value () {
this.handleChange(this.value)
}
},
data () {
return {
componentName: 'list-remote-select',
list: [],
innerOtherQuery: {},
value: undefined,
pageConfig: {
current: 1,
pageSize: 20
}
},
mounted () {
if (!this.type) {
return this.$message.error('远程下拉请设置类型')
}
this.nameKey = mapper.getNameKey(this.type)
this.fetch()
},
methods: {
getKey (type) { // 各种类型的接口type
return {
book: 'rtp/book/list', // 获取book的list接口
......
}[type]
},
fetch (name) {
if (!this.type) return
this.$api.fetchList(mapper.getKey(this.type), value, this.pageConfig).then(({ data }) => {
this.list = this.format(data.data)
this.$refs.list.setData(this.list)
})
},
handleChange (value) {
this.$emit('input', value)
},
format (list) {
return list.map(item => mapper.format(item, this.type))
},
getPlaceHolder () {
if (this.placeholder) {
return this.placeholder
}
return mapper.getPlaceHolder(this.type)
}
}
}
</script>
4，把常用的一些方法，进行封装，减少代码冗余
5，来看一下项目简化，废话不多说，直接看demo
- 文件结构
src
component // 此处是要在页面中展示的组件
card1
card2
card3
card4
card5
card6
view
index 首页
contain 容器组件，展示数据
- contain 容器组件结构
<template>
<div class="content">
<div>我是容器组件展示内容</div>
// 通过 is 展示 component 下面的组件
<component :is="comment">123</component>
</div>
</template>
<script>
const cardSync = { //一个容器包含所有的组件
card1: () => import(/* webpackChunkName: "about" */ "./../component/card1.vue"),
card2: () => import(/* webpackChunkName: "about" */ "./../component/card2.vue"),
card3: () => import(/* webpackChunkName: "about" */ "./../component/card3.vue"),
card4: () => import(/* webpackChunkName: "about" */ "./../component/card4.vue"),
card5: () => import(/* webpackChunkName: "about" */ "./../component/card5.vue"),
card6: () => import(/* webpackChunkName: "about" */ "./../component/card6.vue"),
};
export default {
name: "contain",
data() {
return {
comment: ""
}
}
created() {
this.type()
},
methods: {
type() { // 通过route传的参数，与cardSync进行判断，展示那个组件
for (let key in cardSync) {
if (key === this.$route.params.name) {
this.comment = cardSync[key]
}
}
}
}
}
</script>
<style scoped>
.blue {
color: blue;
}
.content{
padding: 20px;
}
</style>
- index 通过 to 进行传展示组件参数
<router-link to="/contain/card3">组件化容器</router-link>
这样的话，我们即减少了项目中，路由过多的问题，也会让项目更加简洁。
