Vue中的动态加载组件

Vue中动态组件加载

背景：在vue中，内容过多，需要采用分解成不同的组件，在父组件中引入子组件，常见的有静态引入（在某一个组件中指定引入某一个子组件）以及动态引入（在组件中根据不同的场景需要使用不同的子组件），通常使用于对话框的封装中。

用法1:
通常在vue项目中，需要在组件中引入子组件，常见的方法：

在html中直接引入，此时子组件是写死的，不能改变

<div><my-component/>
</div>

在js中引入一个my-component组件,这样就可以直接使用，显示对应子组件的内容

import my-component from './my-component'
exports default {components:{my-component}
}

用法2:动态加载子组件，根据不同的情景加载不同的组件

html中

<div><component ref="child" :is="currentComponent"/>
</div>

通过is的值来动态绑定当前使用哪个子组件

js中：

import A from './a'
import B from './b'
import C from './c'export default{components:{A ,B,C}
}

在vue中引入了三个组件A，B，C，具体在html中使用哪个，需要根据当前的currentComponent的值来判断，如果当前的值是A，那引入的子组件为A，如果为B，那引入的子组件为B

Vue中的动态加载组件相关推荐

在 VUE中，动态加载JS文件
需求在vue组件中需要调用的函数方法名是相同的(接口相同),但是按照页面不同需要导入不同JS文件 .如下: 然而上面这种写法肯定是行不通的,但表达的需求很明确.根据menuId的不同从JS文件中获取 ...
踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
Vue动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
angular使用动态组件后属性值_Angular动态加载组件
引言有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件:这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT. 动态加载组件 ...

Vue中的动态加载组件

Vue中的动态加载组件相关推荐

最新文章

热门文章