Vue中component標(biāo)簽解決項目組件化操作
一、 啰嗦幾句
在vue項目組件化的過程中，遇到了一些問題，什么問題呢？就是在做一個多功能，多可用，多兼容的大組件的時候，發(fā)現(xiàn)在這個組件內(nèi)部，實現(xiàn)了太多的if、for邏輯，包括大量的html元素，雖然說每段功能塊都有批注，但是體積還是比較龐大，最近有些需求，需要將頁面上的一大塊篩選功能剝離開，形成單獨的組件，統(tǒng)一數(shù)據(jù)渲染，統(tǒng)一組件管理，且這些功能無論是樣式，或者是從結(jié)構(gòu)來說，差異性都很大，所以考慮了以下幾種開發(fā)方式：
1. 大容量單組件開發(fā)，渲染和傳入的數(shù)據(jù)使用各種type、ctype判斷
2. 使用插槽開發(fā)，根據(jù)type調(diào)用對應(yīng)的組件
3. 使用component加載組件的方式，動態(tài)渲染調(diào)用組件
最終選擇：第三種方式，采用<component>標(biāo)簽動態(tài)引入的方式開發(fā)
二、 官方文檔解釋
1. https://cn.vuejs.org/v2/guide/components.html#動態(tài)組件
2. https://cn.vuejs.org/v2/guide/components-dynamic-async.html
3. https://jsfiddle.net/chrisvfritz/o3nycadu/
三、 開發(fā)步驟
1. 首先按照大組件模式開發(fā)，功能拆分，統(tǒng)一在大組件中實現(xiàn)所有功能模塊的樣式 ( 注意：需要在在局部樣式覆蓋全局樣式的條件需要在樣式中使用 /deep/ 、 >>> )
<template>
<div class="filter-input-container">
<!-- 選項卡 -->
<div class="filter-line">
//...
</div>
<!-- 時間選擇 -->
<div class="filter-line">
//...
</div>
<!-- 信息列別下拉框 -->
<div class="filter-line">
//...
</div>
<!-- 搜索表單框 -->
<div class="filter-line">
//...
</div>
</div>
</template>
<script scoped>
import { DatePicker, Select, Option, Button, Input } from 'element-ui';
export default {
components:{
'el-date-picker': DatePicker,
'el-select': Select,
'el-option': Option,
'el-button': Button,
'el-input': Input
}
}
</script>
<style scoped lang="stylus">
@import './stylus/filter-input.styl'
</style>
2. 單個功能組件剝離成單獨的組件文件
（1）搜索：fi-search.vue
（2）下拉： fi-select.vue
（3）標(biāo)簽：fi-tab.vue
（4）時間：fi-time.vue
然后在每個單獨的組件內(nèi)設(shè)置默認(rèn)的props值，通過這個值來動態(tài)渲染組件和綁定數(shù)據(jù)，根據(jù)組件類別綁定click或者change事件
3. 選擇一個下拉功能文件源碼示例分析
<template>
<div class="filter-line">
<section class="filter-line-title">{{title}}</section>
<section class="filter-line-content">
<span class="flc-span-wrap">
<!-- 下拉框選項卡 -->
<el-select v-model="contents.value" placeholder="請選擇" :class="'selectBox'">
<el-option
v-for = "v,i in contents.options"
:key = "i"
:label = "v.label"
:value = "v.value">
</el-option>
</el-select>
</span>
</section>
</div>
</template>
<script scoped>
import { Select, Option } from 'element-ui';
export default {
name: 'fi-select',
data(){
return {
selectValue: ''
}
},
props:{
title:{
type: String,
default: '信息類別'
},
contents:{
type: Object,
default:() => ({
options: [
{ label: 'show option 1', value: 1 },
{ label: 'show option 2', value: 2 },
{ label: 'show option 3', value: 3 },
{ label: 'show option 4', value: 4 }
],
value: ''
})
}
},
methods:{
},
components:{
'el-select': Select,
'el-option': Option
}
}
</script>
4. 調(diào)用下拉框示例
<component v-bind:is="FiSelect" :title="'任務(wù)類別'"></component>
四、 數(shù)據(jù)渲染和管理的邏輯
我們將通過數(shù)據(jù)渲染及綁定所有組件內(nèi)容，所以數(shù)據(jù)的結(jié)構(gòu)如下：
export const listFilters = [{
title: '工作狀態(tài)',
type: 'tab',
emit: '',
contents: [
{name:'all',text: '全部'},
{name:'not-issued', text: '未完成'},
{name: 'is-issued',text:'已完成'},
{name: 'is-ended',text: '已結(jié)束'}
]
},{
title: '工作時間',
type: 'time',
emit: '',
contents: [
{ type:'tab',name:'all',text: '全部' },
{ type:'tab',name:'today', text: '今天' },
{ type:'tab',name: 'week',text:'一周內(nèi)' },
{ 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: '網(wǎng)站名稱',
type: 'select',
emit: '',
contents: {
options: [
{ label: '騰訊網(wǎng)', value: 1 },
{ label: '新浪網(wǎng)', value: 2 },
{ label: '網(wǎng)易網(wǎng)', value: 3 },
{ label: '鳳凰網(wǎng)', value: 4 },
{ label: '搜狐網(wǎng)', value: 5 }
],
value: ''
}
},{
title: '工作搜索',
type: 'search',
contents: {
inputValue: ''
}
}];
五、組件遍歷調(diào)用渲染
<template>
<div class="filter-input-container">
<!-- 最終可以動態(tài)調(diào)用所有組件 -->
<component v-bind:is="'fi-'+v.type" :title="v.title" :contents="v.contents" v-for="v,i in listFilters" :key="i"></component>
</div>
</template>
<script scoped>
import {listFilters} from './scripts/filters.data.js';
export default {
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') // 選擇下拉框
}
}
</script>
<style scoped lang="stylus">
@import './stylus/filter-input.styl'
</style>
六、 最終案例預(yù)覽效果
補(bǔ)充知識：vue中component組件使用——模塊化開發(fā)和全局組件
1、模塊化開發(fā)組件：
box1.vue文件如下：
<template>
<div class="hello">
<h1>測試</h1>
</div>
</template>
<script>
export default {
}
</script>
box2.vue文件如下：import引入box1.vue，components設(shè)置，然后設(shè)置成標(biāo)簽使用<box1><template>
<div>
<box1></box1>
</div>
</template>
<script>
import box1 from '@/components/box1'
export default {
components: {'box1': box1},
}
</script>
2、全局組建
<div id="example">
<my-component></my-component>
</div>
// 注冊
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
渲染為：
<div id="example"> <div>A custom component!</div> </div>
以上這篇Vue中component標(biāo)簽解決項目組件化操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue watch內(nèi)部調(diào)用methods方法報錯的解決方案
這篇文章主要介紹了vue watch內(nèi)部調(diào)用methods方法報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
本文就討論下怎么實現(xiàn)一個處理.vue文件的loader，以及用loader處理完.vue文件怎么把內(nèi)容渲染在瀏覽器上并實現(xiàn)簡單的響應(yīng)式，對vue文件解析器相關(guān)知識感興趣的朋友一起看看吧2022-06-06
詳解基于webpack和vue.js搭建開發(fā)環(huán)境
本篇文章主要介紹了詳解基于webpack和vue.js搭建開發(fā)環(huán)境 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
解決vue?eslint開發(fā)嚴(yán)格模式警告錯誤的問題
這篇文章主要介紹了解決vue?eslint開發(fā)嚴(yán)格模式警告錯誤的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue項目中,對數(shù)字進(jìn)行格式化,實現(xiàn)帶小數(shù)的數(shù)字三位一分隔的效果,可以通過自定義過濾器來實現(xiàn),使用JavaScript的toLocaleString方法可以方便地將數(shù)字轉(zhuǎn)換成帶逗號的格式2024-10-10
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_發(fā)中，表格業(yè)務(wù)基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11
vue-calendar-component日歷組件報錯Clock is not defi
這篇文章主要為大家介紹了vue-calendar-component日歷組件報錯Clock is not defined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要為大家介紹了uni-popup手?jǐn)]了一個菜鳥上門取件時間選擇器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue跨域請求問題解決方案過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08