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

1.vue实验

1.1 import

1.2 push

应用举例

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

2.工程代码

2.1 index.html 





vue-框架实验




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 





test



Vue实验

3 运行结果

vue-框架实验-ifarame动态加载_第1张图片

你可能感兴趣的:(vue)