Vue中component标签解决项目组件化操作

2023-07-17 04:42:03 87

一、啰嗦几句

在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/、>>>)




import{DatePicker,Select,Option,Button,Input}from'element-ui';
exportdefault{
components:{
'el-date-picker':DatePicker,
'el-select':Select,
'el-option':Option,
'el-button':Button,
'el-input':Input
}
}



@import'./stylus/filter-input.styl'

2.单个功能组件剥离成单独的组件文件

（1）搜索：fi-search.vue

（2）下拉：fi-select.vue

（3）标签：fi-tab.vue

（4）时间：fi-time.vue

然后在每个单独的组件内设置默认的props值，通过这个值来动态渲染组件和绑定数据，根据组件类别绑定click或者change事件

3.选择一个下拉功能文件源码示例分析





import{Select,Option}from'element-ui';

exportdefault{
name:'fi-select',
data(){
return{
selectValue:''
}
},
props:{
title:{
type:String,
default:'信息类别'
},
contents:{
type:Object,
default:()=>({
options:[
{label:'showoption1',value:1},
{label:'showoption2',value:2},
{label:'showoption3',value:3},
{label:'showoption4',value:4}
],
value:''
})
}
},
methods:{

},
components:{
'el-select':Select,
'el-option':Option
}
}

4.调用下拉框示例

四、数据渲染和管理的逻辑

我们将通过数据渲染及绑定所有组件内容，所以数据的结构如下：

exportconstlistFilters=[{
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:''
}
}];

五、组件遍历调用渲染





import{listFilters}from'./scripts/filters.data.js';

exportdefault{
data(){
return{
components:['fi-tab','fi-time','fi-select','fi-search','fi-input'],
listFilters:listFilters
}
},
props:{

},
methods:{

},
components:{
'fi-search':()=>import('../components/fi-search.vue'),//搜索表单
'fi-tab':()=>import('../components/fi-tab.vue'),//tab切换
'fi-time':()=>import('../components/fi-time.vue'),//时间选择
'fi-select':()=>import('../components/fi-select.vue')//选择下拉框
}
}



@import'./stylus/filter-input.styl'

六、最终案例预览效果

补充知识：vue中component组件使用——模块化开发和全局组件

1、模块化开发组件：

box1.vue文件如下：

box2.vue文件如下：import引入box1.vue，components设置，然后设置成标签使用

2、全局组建

//注册 Vue.component('my-component',{ template:'

Acustomcomponent!

' }) //创建根实例 newVue({ el:'#example' })

渲染为：


Acustomcomponent!

以上这篇Vue中component标签解决项目组件化操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue中component标签解决项目组件化操作

测试

随机推荐

Vue中component标签解决项目组件化操作

测试

热门推荐

随机推荐