webpack会对每个文件定义一个id,这个id是唯一的。在import的时候,会先查找一遍文件对应的id,如果未加载,将进行加载。在加载时,就会执行内部的函数。所以,可知,如果导出的是实例化函数对象,那么,这个对象将是同一个对象,如果是函数对象,外部组件也可以实例化当前作用域的对象。
QualityControlParamManager.ts文件
-------------------------------------------
class QualityControlParamManager{
public globalVal:number = 1;
public constructor(){
console.log("--- quality control parameter configuration ---")
}
}
var qualityControlParamManager = new QualityControlParamManager();
export default qualityControlParamManager;
QualityContorlTask.vue
-------------------------------------
import globalParamManager from "./QualityControlParamManager"
export default {
created:{
globalParamManager.globalVal = 10
console.log("====val==="+globalParamManager.globalVal)
}
}
QualityContorl.vue
-------------------------------------
import globalParamManager from "./QualityControlParamManager"
export default {
created:{
console.log("====val==="+globalParamManager.globalVal)
}
}
以上两个页面,QualityContorlTask.vue页面组件显示后,后续路由到页面组件QualityContorl.vue,globalVal的值是10。所以,可知两个组件中导入的globalParamManager对象是同一个对象。