vue-框架实验-ifarame动态加载

最新推荐文章于 2024-06-25 15:22:52 发布

科学的发展-只不过是读大自然写的代码

最新推荐文章于 2024-06-25 15:22:52 发布

阅读量337

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xie__jin__cheng/article/details/109037840

版权

vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

本文介绍了一个使用Vue.js进行动态组件加载的实验案例。通过import动态加载组件，并将其添加到组件列表中。实验包括index.html文件设置、main.js中Vue实例的定义及index2.html的内容。

摘要由CSDN通过智能技术生成

1.vue实验

1.1 import

1.2 push

应用举例

import(path + componentName + '.js').then((component) => {
this.dynamicComps.push({name: componentName});
});

2.工程代码

2.1 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>vue-框架实验</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <iframe id="frameId3" src="" style="height: 230px" frameborder="0"></iframe>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html>

2.2 main.js

window.parentApp = new Vue({
	data() {
		return {
			dynamicComps: []
		}
	},
	methods: {
		importComponent(componentName, path) {
			import(path + componentName + '.js').then((component) => {
				this.dynamicComps.push({name: componentName});
			});
		},
		setSrc() {
			$('#frameId3').attr('src', './index2.html');
		}
	},
	mounted() {
		this.setSrc();
	}
}); 
$(document).ready(() => {
	window.parentApp.$mount('#app');
});

2.3 index2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
</head>

<body>
Vue实验
</body>
</html>

3 运行结果