Vue动态组件component的深度使用说明
作者：语霖BABA
这篇文章主要介绍了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监听到，这样参数传递的问题就解决了，使用动态组件就可以像使用实际一样，开发体验上实现零差别，代码处理逻辑实现解耦
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包裹，就可以提高性能，前提是大项目!相对提升性能。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。