vue 引入外部js文件的变量、方法、注册全局变量、ES6模块化export 与export default区别

目录

首先定义外部存储变量或方法的文件leftTabsOnePush.js

需引入外部变量或方法的vue文件

注册全局变量

一、ES6模块主要有两个功能：export和import

二、export 和 export default 的区别

---

前言：此篇文章是针对vue2版本的外部变量、方法的引入使用和导入导出区别，解答import导入时是否需要 {} 的问题，vue3版本可能不适用。

参考文章：

http://t.csdn.cn/qeFl0

正文：

首先定义外部存储变量或方法的文件leftTabsOnePush.js

//声明对象 动态追加使用
let aListOfPolicies = {
    "coordCrossList": [],
    "detZoneId": "",
    "focusCrossId": "",
    "strategyName": "",
    "strategyNo": 0,
    "strategyType": 0,
    "triStatus": null,
};
//简单方法举例
function findItem() {
  console.log('方法举例')
};
export {
  aListOfPolicies,
  findItem,
}

需引入外部变量或方法的vue文件

//导入后直接使用即可无需添加this前缀
<script>
import { aListOfPolicies, findItem } from "../js/leftTabsOnePush.js"
export default {
name: "leftTabsOne",
  data() {
    return {
       submitArr
   },
 methods: {
    //导入变量使用举例
    listPolicies(){
    let obj = aListOfPolicies;
        this.submitArr.push(JSON.parse(JSON.stringify(obj)));
        console.log(this.submitArr,'追加成功')
    },
  },
  created() {
    this.listPolicies();
    //导入方法使用举例
    findItem();
  },
},
</script>

注册全局变量

Vue文件在src文件目录下，可以import…；如果在静态文件夹static目录下，可以在主页面index.html引入

• 在main.js中引入

import URL from './js/config.js'  //引入
Vue.prototype.Global=URL;//加载到Vue原型属性

• 全局变量使用

this.Global.URL_CONFIG.URL

一、ES6模块主要有两个功能：export和import

export：用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import：用于在一个模块中加载另一个含有export接口的模块。

二、export 和 export default 的区别

1. 相同点：

1）利用export和export default关键字输出自定义独立文件（也成为一个模块）中的所有变量、方法等，
以提供外部使用。模块：即独立的XXX.js文件
2）export与export default均可用于导出常量、函数、文件、模块等

2. 不同点

1）在一个文件或模块中，export、import可以有多个，export default仅有一个
2）通过export方式导出，在导入时要加{ }，export default则不需要
	(1) 输出单个值，使用export default
	(2) 输出多个值，使用export
	(3) export default与普通的export不要同时使用
	出现问题：当使用export default {a, b, c, d} 容易造成嵌套多层；
	结果：{a: {a, b, c, d}, b:{a, b, c, d}, c:{a, b, c, d}, d:{a, b, c, d}} //error

export：

1）export命令对外接口的名称是一定的、不变的；
2）import命令从模块导入的变量名与被导入模块对外接口的名称相同；即大括号里面的变量名，
必须与被导入模块（xxx.js）对外接口的名称相同；
3）如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
	import { name as newname } from './xxx.js';

export default：

1）export default命令，为模块指定默认输出。即一个模块只能有一个默认输出，也就是一个
模块export default命令只能使用一次，因此export default命令是唯一的，import命令后面
也就不用再加大括号。
2）export default命令对外输出的变量名可以是任意的，即其他模块加载该模块时，
import命令可以为该匿名函数指定任意名字。注意这时import命令后面，不使用大括号。

3.export 和 export default 的本质（转化）
export default 和就是export的一种特殊形式，或者说就是export的一个个例，即输出一个叫做default的变量或方法，然后系统允许为它取任意名字。如下：

function add(x, y) {
  return x + y;
}
export default add;// 等同于  export {add as default};

如下面的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

// export-default.js
export default function () {
  	console.log('我是default函数');
}

// import-default.js
import defaultfun from './export-default';
defaultfun(); // 我是default函数

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

// export-default.js
import { default as defaultfun } from './export-default';
// 等同于
import defaultfun from './export-default';