写本篇文章之前其实也关注过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.extend和Vue.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动态注册组件实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
本文向大家介绍Oracle静态注册与动态注册详解,包括了Oracle静态注册与动态注册详解的使用技巧和注意事项,需要的朋友参考一下 一、概述: Oracle的注册就是将数据库作为一个服务注册到监听程序。客户端不需要知道数据库名和实例名,只需要知道该数据库对外提供的服务名就可以申请连接到这个数据库。这个服务名可能与实例名一样,也有可能不一样。 在数据库服务器启动过程中,数据库服务器会向监听程
本文向大家介绍vue elementui el-form rules动态验证的实例代码详解,包括了vue elementui el-form rules动态验证的实例代码详解的使用技巧和注意事项,需要的朋友参考一下 一、介绍 简介:在使用elementUI el-form 中,对于业务不同的时候可能会产生不同表单结构,但是都是存在同一个表单控件el-form中。 图片介绍: 1、在用户选择单选或多
本文向大家介绍Vue学习之路之登录注册实例代码,包括了Vue学习之路之登录注册实例代码的使用技巧和注意事项,需要的朋友参考一下 根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 Vue.js 主要目录结构 完成后就可以在/src/components/*.vue模板中写代码,ctrl+s保存
本文向大家介绍Spring组件自动扫描详解及实例代码,包括了Spring组件自动扫描详解及实例代码的使用技巧和注意事项,需要的朋友参考一下 Spring组件自动扫描详解及实例代码 问题描述 一个系统往往有成千上万的组件,如果需要手动将所有组件都纳入spring容器中管理,是一个浩大的工程。 解决方案 Spring 提供组件扫描(component scanning)功能。它能从classpath里
本文向大家介绍Android 动态注册监听网络变化实例详解,包括了Android 动态注册监听网络变化实例详解的使用技巧和注意事项,需要的朋友参考一下 Android 动态注册监听网络变化实例详解 新建一个BroadcastTest项目,然后修改MainActivity中的代码,如下: 动态注册的广播接收器一定要取消注册才行,在onDestroy()方法中通过调用unregisterReceive
本文向大家介绍vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码,包括了vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码的使用技巧和注意事项,需要的朋友参考一下 具体代码如下所示: 下面看下vue component动态组件 动态组件 通过component标签 的is属性来进行组件的切换 is的属性值决定要显示的