Vue动态组件component的深度使用说明
目录
- 背景介绍
- 组件封装
- Vue动态组件
- 改造组件
- Vue动态组件的理解
- 什么是动态组件
背景介绍
最近在封装一些基于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包裹,就可以提高性能,前提是大项目!相对提升性能。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)