一、 啰嗦几句
在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if、for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式:
1. 大容量单组件开发,渲染和传入的数据使用各种type、ctype判断
2. 使用插槽开发,根据type调用对应的组件
3. 使用component加载组件的方式,动态渲染调用组件
最终选择:第三种方式,采用
二、 官方文档解释
1. https://cn.vuejs.org/v2/guide/components.html#动态组件
2. https://cn.vuejs.org/v2/guide/components-dynamic-async.html
3. https://jsfiddle.net/chrisvfritz/o3nycadu/
三、 开发步骤
1. 首先按照大组件模式开发,功能拆分,统一在大组件中实现所有功能模块的样式 ( 注意:需要在在局部样式覆盖全局样式的条件需要在样式中使用 /deep/ 、 >>> )
//...//...//...//...
2. 单个功能组件剥离成单独的组件文件
(1)搜索:fi-search.vue
(2)下拉: fi-select.vue
(3)标签:fi-tab.vue
(4)时间:fi-time.vue
然后在每个单独的组件内设置默认的props值,通过这个值来动态渲染组件和绑定数据,根据组件类别绑定click或者change事件
3. 选择一个下拉功能文件源码示例分析
{{title}}
4. 调用下拉框示例
四、 数据渲染和管理的逻辑
我们将通过数据渲染及绑定所有组件内容,所以数据的结构如下:
export const listFilters = [{ title: '工作状态', type: 'tab', emit: '', contents: [ {name:'all',text: '全部'}, {name:'not-issued', text: '未完成'}, {name: 'is-issued',text:'已完成'}, {name: 'is-ended',text: '已结束'} ] },{ title: '工作时间', type: 'time', emit: '', contents: [ { type:'tab',name:'all',text: '全部' }, { type:'tab',name:'today', text: '今天' }, { type:'tab',name: 'week',text:'一周内' }, { type:'tab',name: 'week',text:'这个月' }, { type:'custom',name:'custom',sv:'',ev:'' } ] },{ title: '来源类别', type: 'select', emit: '', contents: { options: [ { label: '类型 1', value: 1 }, { label: '类型 2', value: 2 }, { label: '类型 3', value: 3 }, { label: '类型 4', value: 4 } ], value: '' } },{ title: '网站名称', type: 'select', emit: '', contents: { options: [ { label: '腾讯网', value: 1 }, { label: '新浪网', value: 2 }, { label: '网易网', value: 3 }, { label: '凤凰网', value: 4 }, { label: '搜狐网', value: 5 } ], value: '' } },{ title: '工作搜索', type: 'search', contents: { inputValue: '' } }];
五、组件遍历调用渲染
六、 最终案例预览效果
补充知识:vue中component组件使用——模块化开发和全局组件
1、模块化开发组件:
box1.vue文件如下:
测试
box2.vue文件如下:import引入box1.vue,components设置,然后设置成标签使用
2、全局组建
// 注册 Vue.component('my-component', { template: ' A custom component!' }) // 创建根实例 new Vue({ el: '#example' })
渲染为:
A custom component!
以上这篇Vue中component标签解决项目组件化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。