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和C#的异同
May 31 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
图解js图片轮播效果
Dec 20 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
实用的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
在数据量大(超过10万)的情况下
2007/01/15 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
CI框架表单验证实例详解
2016/11/21 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python去除文件中重复的行实例
2018/06/29 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
建议书的格式
2014/05/12 职场文书
公司委托书格式范本
2014/09/16 职场文书
庐山导游词
2015/02/03 职场文书
经营场所证明范本
2015/06/19 职场文书
初中英语教学反思范文
2016/02/15 职场文书