vue引入组件import和require的区别
node编程中最重要的思想就是模块化,import和require都是被模块化所使用。遵循规范require是 AMD规范引入方式import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用,所以require理论上可以运用在代码的任何地方import是编译时调用,所以必须放在文件开头本质require是赋值过程,其实require的结果就是对象
·
node编程中最重要的思想就是模块化,import和require都是被模块化所使用。
遵循规范
require是 AMD规范引入方式
import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法
调用时间
require是运行时调用,所以require理论上可以运用在代码的任何地方
import是编译时调用,所以必须放在文件开头
本质
require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量
import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require
例子
1.require
<component :is="locationPath"/>
locationPath = resolve => require.ensure([], () => resolve(require('./' + Url + '.vue')));
require 怎么向子组件传参
<component :is="locationPath" obj="componentObj" />
export default {
data() {
return {
componentObj:{},
}
}
}
// 在调用的地方传参即可
this.componentObj = {type:'123123'}
locationPath = resolve => require.ensure([], () => resolve(require('./' + Url + '.vue')));
2.import
<div id="divId"></div>
registerComponent(path,id) {
let that = this;
return import('./' + path + '.vue').then(component => {
let constructor = Vue.extend(component.default);
let instance = new constructor();
// 挂载到DOM元素在对应的ID上
instance.$mount('#' + id);
}).catch(function (e) {
console.log('=======动态加载失败!======>',e);
});
}
更多推荐
已为社区贡献1条内容
所有评论(0)