vue动态注册组件实例代码详解
作者:陈小坏 发布时间:2023-07-02 17:01:11
写本篇文章之前其实也关注过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动态注册组件实例代码详解,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://www.cnblogs.com/tnnyang/p/10945399.html
猜你喜欢
- 关于excel多个sheet的导入导出import pandas as pddf = pd.read_excel('test.xls
- QSplitter使用户可以通过拖动子面板的边界控制子面板的大小。在我们的例子中,我们使用了两个QSplitter 对三个QFrame 控件
- *args 和 **kwargs首先,要知道的是并不是必须写成*args和**kwargs。 只有变量前⾯的*才是必须的。所以,你也可以写成
- 大家可能都熟悉.zip格式的文件。它可以把多个文件,压缩成一个文件。这在网络上传输时很有用,而且节省硬盘空间。接下来,我们使用Python实
- Django 的 ORM 有多种关系:一对一,多对一,多对多各自定义的方式为 :一对一: OneToOneField多对一: Foreign
- 本文实例讲述了Python实现爬取马云的微博功能。分享给大家供大家参考,具体如下:分析请求我们打开 Ajax 的 XHR 过滤器,然后一直滑
- 一个网站的导航就相当于是一条路的路标,不同的是,网站的不同栏目页的入口远远比马路要来得复杂,所以一个清晰的导航设计对于一个网站的意义远远大于
- 1. auth介绍Django 自带一个用户验证系统。它负责处理用户账号、组、权限和基于cookie的用户会话。认证系统由以下部分
- MySQL好像从5.0.2版本就开始支持触发器的功能了,本次博客就来介绍一下触发器,首先还是谈下概念性的东西吧:什么是触发器触发器是与表有关
- 写在前面额、、、最近开始学习机器学习嘛,网上找到一本关于机器学习的书籍,名字叫做《机器学习实战》。很巧的是,这本书里的算法是用Python语
- 枚举类Enum枚举类,在企业开发中用的比较多当我们需要定义常量时,一个办法是用大写的变量通过整数来定义,例如月份:# 当项目中需要使用12个
- 1.创建一个项目django-admin.py startproject HelloWorld2.进入HelloWorld项目,在manag
- 油画的实现原理油画简单的理解是带有艺术感的图像,色彩相对于原图要更加鲜艳,但却是失真的。而且对于喜欢欣赏艺术的读者,肯定或多或少关注过油画,
- 在一个网页中,不仅仅只有一个html骨架,还需要css样式文件,js执行文件以及一些图片等。因此在DTL中加载静态文件是一个必须要解决的问题
- 其实小程序上面也可以使用 echart 等开源图表库得,而且支持代码包得裁切功能,但是可能我不会用吧,效果不太好,而且我这就一个图,也没什么
- 线性判别分析(linear discriminant analysis),LDA。也称为Fisher线性判别(FLD)是模式识别的经典算法。
- 目的:方便调试,查看中间结果,因为觉得设断点调试相对麻烦。【运行环境:macOS 10.13.3,PyCharm 2017.2.4】老手:选
- 概述虽然Python的强项在人工智能,数据处理方面,但是对于日常简单的应用,Python也提供了非常友好的支持(如:Tkinter),本文主
- 首先:如果备份的数据库有两个文件,分别是.LDF 和 .MDF,打开企业管理器,在实例上右击---所有任务--附加数据库,然后选择那个.MD
- 一个大于1的自然数,除了1和它本身外,不能被其他自然数(质数)整除(2, 3, 5, 7等),换句话说就是该数除了1和它本身以外不再有其他的