源码搜藏网

背景介绍

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

Vue动态组件的理解

什么是动态组件

让多个组件使用同一个挂载点，并动态切换，这就是动态组件

<template>
  <div>
     <div>动态渲染组件</div>
     <div>
     //component标签就是挂载点,  :is=绑定的组件名字
       <component :is="currentComponent"></component>
     </div>
     <button @click="btn_click()">按钮</button>
  </div>
</template>
<script>
import Tab0 from "@/components/Tab0.vue";
import Tab1 from "@/components/Tab1.vue";
export default {
  name:'About',
  data(){
    return{
      currentIndex:0
    }
  },
  components:{
    Tab0,
    Tab1
  },
  methods:{
    btn_click(){
      if(this.currentIndex==0){
        this.currentIndex=1
      }else{
        this.currentIndex = 0
      }
    }
  },
  computed:{
    currentComponent:function(){
      return `Tab${this.currentIndex}`
    }
  }
}
</script>

每次切换都是生成新的组件，如果用keep-alive包裹，就可以提高性能，前提是大项目!相对提升性能。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。