一、 囉嗦幾句

在vue專案元件化的過程中，遇到了一些問題，什麼問題呢？就是在做一個多功能，多可用，多相容的大元件的時候，發現在這個元件內部，實現了太多的if、for邏輯，包括大量的html元素，雖然說每段功能塊都有批註，但是體積還是比較龐大，最近有些需求，需要將頁面上的一大塊篩選功能剝離開，形成單獨的元件，統一資料渲染，統一元件管理，且這些功能無論是樣式，或者是從結構來說，差異性都很大，所以考慮了以下幾種開發方式：

1. 大容量單元件開發，渲染和傳入的資料使用各種type、ctype判斷

2. 使用插槽開發，根據type呼叫對應的元件

3. 使用component載入元件的方式，動態渲染呼叫元件

最終選擇：第三種方式，採用<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/ 、 >>> )

<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）標籤：fi-tab.vue

（4）時間：fi-time.vue

然後在每個單獨的元件內設定預設的props值，通過這個值來動態渲染元件和繫結資料，根據元件類別繫結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. 呼叫下拉框示例

<component v-bind:is="FiSelect" :title="'任務類別'"></component>

四、 資料渲染和管理的邏輯

我們將通過資料渲染及繫結所有元件內容，所以資料的結構如下：

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',contents: [
    { type:'tab',name:'all',text: '全部' },{ type:'tab',name:'today',text: '今天' },name: 'week',text:'一週內' },text:'這個月' },{ type:'custom',name:'custom',sv:'',ev:'' }
  ]
},{
  title: '來源類別',type: 'select',contents: {
    options: [
      { label: '型別 1',{ label: '型別 2',{ label: '型別 3',{ label: '型別 4',value: 4 }
    ],value: ''
  }
},{
  title: '網站名稱',contents: {
    options: [
      { label: '騰訊網',{ label: '新浪網',{ label: '網易網',{ label: '鳳凰網',value: 4 },{ label: '搜狐網',value: 5 }
    ],{
  title: '工作搜尋',type: 'search',contents: {
    inputValue: ''
  }
}];

五、元件遍歷呼叫渲染

<template>
  <div class="filter-input-container">
    <!-- 最終可以動態呼叫所有元件 -->
    <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>

六、 最終案例預覽效果

補充知識：vue中component元件使用——模組化開發和全域性元件

1、模組化開發元件：

box1.vue檔案如下：

<template>
 <div class="hello">
  <h1>測試</h1>
 </div>
</template>
 
<script>
export default {
 
}
</script>

box2.vue檔案如下：import引入box1.vue，components設定，然後設定成標籤使用<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>'
})
// 建立根例項
new Vue({
 el: '#example'
})

渲染為：

<div id="example">
 <div>A custom component!</div>
</div>

以上這篇Vue中component標籤解決專案元件化操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。