Vue動態組件component的深度使用

背景介紹

最近在封裝一些基於Vue+ElementUI的組件，將一些實際項目中常用的，有一定規律的業務進行抽象總結，開發出相應的Vue組件。

組件封裝

首先想到的就是Form組件，在Element UI提供的Form中，我們需要一個一個的去添加對用的FormItem

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區域">
    <el-select v-model="form.region" placeholder="請選擇活動區域">
      <el-option label="區域一" value="shanghai"></el-option>
      <el-option label="區域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>

可以發現，每個FormItem的結構都是一樣的，只是其中包含的組件不一樣。這樣，我們就可以通過封裝組件的方式，將代碼簡化，

<el-form ref="form" :model="form" label-width="80px">
  <my-form-item
                label="活動名稱"
                v-model="form.name"
                widget="input">


</my-form-item>
  <my-form-item 
                label="活動區域" 
                v-model="form.region" 
                placeholder="請選擇活動區域"
                widget="select"
                :options="options">




</my-form-item>
</el-form>

**my-form-item.vue **0.1版如下

  <el-form-item :label="title">
    <el-select v-if="widget === 'select'" v-model="form[path]" :clearable="true">
      <el-option v-for="option in options" :key="option.code" :label="option.name" :value="option.code"></el-option>
    </el-select>
    <el-input v-else-if="widget === 'input'" v-model="form[path]" :clearable="true"></el-input>
  </el-form-item>

0.1版，直接使用了v-if來處理widget類型，此時，input和select的邏輯耦合在了一起，再需要其他的組件類型時，這個文件結構會很複雜。

Vue動態組件

在Vue中，提供了動態組件component，它可以在動態的選擇加載那個組件。

例子:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!--    <HelloWorld msg="Welcome to Your Vue.js App" />-->

    <a href="#" @click="current = 'hello-world'">Hello World</a>
    <a href="#" @click="current = 'hello-world2'">Hello 2</a>
    <component :is="current" :msg="current" @clicked="handleClicked"></component>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '../components/HelloWorld.vue';
import HelloWorld2 from '../components/HelloWorld2';

export default {
  name: 'Home',
  components: {
    HelloWorld,
    HelloWorld2
  },
  data() {
    return {
      current: 'hello-world'
    };
  },
  methods: {
    handleClicked(e) {
      alert(e);
    }
  }
};

在component中 :is 屬性是必須的，它的內容爲在template中使用的組件標籤。通過 :is 內容的切換就可以動態的渲染和組件了。

改造組件

my-form-item.vue

  <component
    v-if="widgetType"
    :is="currentWidget"
    v-model="form[path]"
    v-bind="$props"
    :label="title"
    :property="mProperty"
  >






</component>

my-input.vue

<template>
  <el-form-item :label="label">
    <el-input :value="value" @input="handleInput"></el-input>
  </el-form-item>
</template>

my-select.vue

<template>
  <el-form-item :label="label">
    <el-select :value="value" :clearable="true" @input="handleInput">
      <el-option
        v-for="option in widgetOptions"
        :key="option.code"
        :label="option.name"
        :value="option.code"
      >




</el-option>
    </el-select>
  </el-form-item>
</template>

這樣input和select就分解成了兩個組件，每個組件只需要關注自己的邏輯即可。如果需要擴充新的組件，只要按照規範創建一個新的組件即可。

總結

動態組件可以將props完成的傳遞給實際的組件，同樣也可將實際組件的Emit監聽到，這樣參數傳遞的問題就解決了，使用動態組件就可以像使用實際一樣，開發體驗上實現零差別，代碼處理邏輯實現解耦