背景介绍

最近在封装一些基于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-itemlabel="活动名称"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" />

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

<script>// @ is an alias to /srcimport 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

  <componentv-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-optionv-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监听到，这样参数传递的问题就解决了，使用动态组件就可以像使用实际一样，开发体验上实现零差别，代码处理逻辑实现解耦