@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.选择一个下拉功能文件源码示例分析
{{title}}
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。