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

最新推荐文章于 2024-06-13 15:00:53 发布

zq.xc

最新推荐文章于 2024-06-13 15:00:53 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/zq1988626/article/details/89852545

版权

要求：根据列表中配置的组件地址，动态加载组件（webpart）

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

目录结构
index.html

目录结构

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>
        `
	}
});

zq.xc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 根据组件地址动态加载异步组件

要求：根据列表中配置的组件地址，动态加载组件（webpart）vue 根据组件地址动态加载异步组件目录结构index.htmlcomponents/component1components/component2components/component3目录结构index.htmlcomponents----component1.js----component2.js----compo...
复制链接

扫一扫