vue动态注册组件实例代码详解

 更新时间:2019年05月30日 10:26:45   作者:陈小坏  
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,需要的朋友可以参考下

写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的。

is

预期:string | Object (组件的选项对象)

用于动态组件且基于 DOM 内模板的限制来工作。

示例:

<!-- 当 `currentView` 改变时,组件也跟着改变 -->
<component v-bind:is="currentView"></component>

详见vue API中关于is的定义和用法

至于用在tab切换中,大概就是:

<template>
 <div>
   <div>#动态组件实现tab切换效果#</div><br><br><br>
     <nav>
       <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(first);">{{first}}</a>
       <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(second);">{{second}}</a>
       <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(third);">{{third}}</a>
     </nav>

     <first :is="currentView" keep-alive></first>
   </div>
</template>

<script>
import first from 'components/first';
import second from 'components/second';
import third from 'components/third';

export default {
  data () {
    return {
     first: "first",
    second: "second",
    third: "third",
    currentView: 'first',
    };
   },
   components: { 
    first,
    second,
    third
   },
   methods: {
    toggleTabs (tabText) {
     this.currentView = tabText;
    }
   }
 }
</script>

但是今天,一个前端同行在群里问我“如果当前页面是根据传进来的参数的不同而显示不同的组件,而且当前页面中可能会import进来几十个子组件,而我又不想挨个去import这些组件,同时这些组件又是按需加载的,该咋实现?” 说实话,一开始我也懵了。

我在想,实在不行就用const demo = () => import ( './demo.vue'),或者在组件的components:中按需引入:

components: {
 demo: () => import ( './demo.vue')
}

但是我一想,也不对啊,这样虽然能实现按需加载,但是还是要挨个import这些组件,还是没有解决实际的问题。

经过查阅资料发现,vue有一个extend的方法可以实现。那么这个extend方法到底是干嘛的?

Vue.extend( options )

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生成组件实例,并挂载到自定义元素上。

只是,extend创建的是一个组件构造器,而不是一个具体的组件实例,所以他不能直接在new Vue中这样使用。

使用Vue.extend创建的组件构造器最终是可以通过Vue.components注册成全局组件或new实例化后注册为局部组件。

接下来就来实现以下使用Vue.extendVue.components注册全局组件:

import Vue from 'vue';

const globalComponent = Vue.extend({
 template:"<p><a :href='url'>{{nama}}</a></p>",
 data:function(){
  return{
   nama:'某度',
   url:'http://www.moudu.com'
  }
 }
});

Vue.component('globalComponent', globalComponent);

使用这个全局注册的组件:

<template>
 <globalComponent />
</template>

注册全局组件还是很简单的,接下来就来实现根据传参的不同加载不同组件的方法:

<template>
 <button type="button" @click="toggle('test')">动态注册组件<button>
 <p><div ref="currentView"></div>
</template>

<script>
import Vue from 'vue'

export default {
 data(){
 return {}
 },
 methods: {
 toggle(componentName){
  this.registerComponent(componentName).then(Component => {
  // new Component().$mount(this.$refs.currentView)

  new Component({
   el: this.$refs.currentView
  })
  })
 },
 registerComponent(componentName) {
  return import(`@/views/${componentName}.vue`).then(component => {
  return Vue.extend(component.default);
  });
 }
 },
}
</script>

这样,我们就可以根据动态传入的参数,通过import( @/views/${componentName}.vue )来加载不同的组件,注意import有一个回调的方法,在该回调中就可以使用 Vue.extend(component.default)来创建一个组件的构造器,然后通过new关键字就可以实现局部注册组件了。

总结

以上所述是小编给大家介绍的vue动态注册组件实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 使用vue-element-admin框架从后端动态获取菜单功能的实现

    使用vue-element-admin框架从后端动态获取菜单功能的实现

    &#8203; vue-element-admin是一个纯前端的框架,左侧菜单是根据路由生成的。实际开发中经常需要根据当前登陆人员的信息从后端获取菜单进行展示,本文将详细介绍如何实现该功能
    2021-04-04
  • vue.js实现标签页切换效果

    vue.js实现标签页切换效果

    这篇文章主要介绍了vue.js实现标签页切换效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue配置font-awesome5的方法步骤

    vue配置font-awesome5的方法步骤

    这篇文章主要介绍了vue配置font-awesome5的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    Vue与后台Api进行交互通常是利用vue-resource来实现的,本质上vue-resource是通过http来完成AJAX请求相应的。这篇文章主要介绍了Vue中的vue-resource示例详解,需要的朋友可以参考下
    2018-11-11
  • Vue快速实现通用表单验证的示例代码

    Vue快速实现通用表单验证的示例代码

    这篇文章主要介绍了Vue快速实现通用表单验证的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue中各种通信传值方式总结

    vue中各种通信传值方式总结

    在本篇文章里小编给大家分享了关于vue中各种通信传值方式的相关知识点,有兴趣的朋友们学习下。
    2019-02-02
  • Vue 打包的静态文件不能直接运行的原因及解决办法

    Vue 打包的静态文件不能直接运行的原因及解决办法

    这篇文章主要介绍了Vue 打包的静态文件不能直接运行的原因及解决办法,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • vue-router传参用法详解

    vue-router传参用法详解

    今天小编就为大家分享一篇关于vue-router传参用法详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue2.0s中eventBus实现兄弟组件通信的示例代码

    vue2.0s中eventBus实现兄弟组件通信的示例代码

    这篇文章主要介绍了vue2.0s中eventBus实现兄弟组件通信的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue深度监听(监听对象和数组的改变)与立即执行监听实例

    vue深度监听(监听对象和数组的改变)与立即执行监听实例

    这篇文章主要介绍了vue深度监听(监听对象和数组的改变)与立即执行监听实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论