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


Posted in Javascript onMay 30, 2019

写本篇文章之前其实也关注过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动态注册组件实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
8个非常实用的Vue自定义指令
Dec 15 Vue.js
实用的Vue开发技巧
May 30 #Javascript
vue-router的两种模式的区别
May 30 #Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 #Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 #Javascript
全面分析JavaScript 继承
May 30 #Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 #Javascript
vue组件三大核心概念图文详解
May 30 #Javascript
You might like
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
input 高级限制级用法
2009/03/26 Javascript
js的一些常用方法小结
2011/06/29 Javascript
javascript时区函数介绍
2012/09/14 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Python3 翻转二叉树的实现
2019/09/30 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
倡导文明标语
2014/06/16 职场文书
工会工作先进事迹
2014/08/18 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
事业单位聘任报告
2015/03/02 职场文书
同意落户证明
2015/06/19 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
新课程改革心得体会
2016/01/22 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
java实现面板之间切换功能
2022/06/10 Java/Android