目录结构

index.html
components
----component1.js
----component2.js
----component3.js

index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Demo</title></head><body><h1>动态组件演示</h1><div id="app"><input type="button" value="动态加载组件3" @click="list.push({id:3,name:'name-3',component:'./components/component3.js'})" /><component v-for="item in list" :is="getComponent" :data="item" :key="item.id"></component></div></body><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcss.com/require.js/2.3.6/require.js"></script><script>new Vue({el:"#app",data:function(){return {list:[{id:1,name:'name-1',component:"./components/component1.js"},{id:2,name:'name-2',component:"./components/component2.js"}]}},methods:{getComponent:function(resolve){return new Promise(function(resolve1,reject1){resolve1({props:["data"],data:function(){return {}},methods:{getComponent:function(){//不知有没有更好的方式获取item数据，这里用了一层组件嵌套var data = this.data;return new Promise(function(resolve2,reject2){requirejs([data.component],function(component){resolve2(component);});});}},template: '<component :is="getComponent" :data="data"></component>'});});}}})</script>
</html>

components/component1

define(function(){return {props:["data"],template:`<div style='border:1px solid red;padding:10px;'><h1>路径：{{data.component}}</h1>数据：{{JSON.stringify(data)}}<p>来自组件1的html</p></div>`}
});

components/component2

define(function(){return {props:["data"],template:`<div style='border:1px solid red;padding:10px;'><h1>路径：{{data.component}}</h1>数据：{{JSON.stringify(data)}}<p>来自组件2的html</p></div>`}
});

components/component3

define(function(){return {props:["data"],template:`<div style='border:1px solid red;padding:10px;'><h1>路径：{{data.component}}</h1>数据：{{JSON.stringify(data)}}<p>来自组件3的html</p></div>`}
});

vue 根据组件地址动态加载异步组件相关推荐

vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
iview级联选择组件的动态加载数据的使用与编辑回显
感慨就不多说了,心声万千,上代码. 1.页面组件,动态加载需要loadData,iview官网有写 <Cascader :data="treeData" :load-data ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
reactjs通过lazy函数配合import函数动态加载路由组件
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>i ...
Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
vue组件的动态加载
平常的vue项目开发,已经很难遇见一千行,甚至几千行代码的页面了,毕竟大家都会去拆分组件.但如果一个页面需要通过十几个组件或者几十个组件中的某几个组件去排列组合渲染,此时用动态加载就很有必要了. ...
import() 动态加载component组件失败
在写 vue+element 从后台获取数据写导航栏时,当我加载动态路由,import() 总是失败. 假设 path: "@/views/Home.vue",name: &qu ...
netcore实践：跨平台动态加载native组件
缘起netcore框架下实现基于zmq的应用.在.net framework时代,我们进行zmq开发由很多的选择,比较常用的有clrzmq4和NetMQ. 其中clrzmq是基于libzmq的Inte ...

vue 根据组件地址动态加载异步组件

vue 根据组件地址动态加载异步组件

目录结构

index.html

components/component1

components/component2

components/component3

vue 根据组件地址动态加载异步组件相关推荐

最新文章

热门文章