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)

相关推荐

  • Vue 动态组件components和v-once指令的实现

    一.实现两个组件间互相展示.互相隐藏 <!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <ch

  • vue components 动态组件详解

    目录 总结 总结 数组发生变化时,动态加载相应数据 场景:点击不同组件名称,界面显示相应组件 步骤一:导入所需组件 步骤二:点击 tab 选项卡,将对应组件名添加进数组 步骤三:使用动态组件,:is 属性绑定组件名 <div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div

  • vue 动态组件(component :is) 和 dom元素限制(is)用法说明

    一.is的使用 参考Vue 2.0教程,有讲到 is 的使用: 解析 DOM 模板时的注意事项 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的.而有些元素,诸如 <li>.<tr> 和 <option>,只能出现在其它某些特定的元素内部. 这会导致我们使用这些有约束条件的元素时遇到一些问题.例如: <table> <blog

  • vue 动态组件component

    目录 1.component 2.keep-alive 2.1存在的问题 2.2使用keep-alive解决 2.3keep-alive的生命周期 2.4keep-alive 的 include, exclude属性 1.component 如何实现动态组件渲染 vue提供了一个内置的<component> ,专门用来实现动态组件的渲染. 这个标签就相当于一个占位符,需要使用is属性指定绑定的组件 <button @click="comName = 'Left'"&g

  • vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </styl

  • Vue动态组件component的深度使用说明

    目录 背景介绍 组件封装 Vue动态组件 改造组件 Vue动态组件的理解 什么是动态组件 背景介绍 最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件. 组件封装 首先想到的就是Form组件,在Element UI提供的Form中,我们需要一个一个的去添加对用的FormItem <el-form ref="form" :model="form" label-width="8

  • Vue动态组件component标签的用法大全

    目录 简介 说明 官网网址 示例 路由设置 父组件 子组件 简介 说明 本文介绍Vue的动态组件的用法. 在Vue中,可以通过component标签的is属性动态指定标签,例如: <component :is="componentName"></component> 此时,componentName的值是什么,就会引入什么组件. 官网网址 https://v2.cn.vuejs.org/v2/guide/components.html#动态组件 示例 路由设置

  • vue动态组件实现选项卡切换效果

    本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g

  • Vue动态组件实例解析

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件 <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></compon

  • Vue 动态组件与 v-once 指令的实现

    本文介绍了Vue 动态组件与 v-once 指令的实现,分享给大家,具体如下: <div id="root"> <child-one></child-one> <child-two></child-two> <button>change</button> </div> Vue.component('child-one', { template: `<div>child-one&l

  • Vue动态组件与异步组件实例详解

    本文实例讲述了Vue动态组件与异步组件.分享给大家供大家参考,具体如下: 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题.例如我们来展开说一说这个多标签界面: 你会注意到,如果你选择了一篇文章,切换到

  • VUE 动态组件的应用案例分析

    本文实例讲述了VUE 动态组件的应用.分享给大家供大家参考,具体如下: 业务场景 我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现. 较常规的方法是使用v-if 来实现,这样界面看上去比较复杂,而且需要进行修改主页面. 解决方案 可以使用动态组件来实现,为了体现动态组件的特性,我们简化实现方式,编写两个简单的组件来测试一下这个功能. 文本组件配置: <template> <div>

  • vue 动态组件用法示例小结

    本文实例讲述了vue 动态组件用法.分享给大家供大家参考,具体如下: 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换.根据 v-bind:is="组件名" 中的组件名去自动匹配组件,如果匹配不到则不显示. 改变挂载的组件,只需要修改is指令的值即可. <!DOCTYPE html> <html> <head> <meta charset="utf-

随机推荐