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" class="lazy" data-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 /class="lazy" data-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包裹，就可以提高性能，前提是大项目!相对提升性能。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
