vue 里面 export/import js文件

Posted 2021-08-27 左直拳

vue要导入js文件的话，有一定的讲究，js文件本身也需要遵循一定的格式。

vue最大的特征，我看就是组件化开发。其中，export 各种vue组件已经是必要操作，不要太多。那么， js文件呢？以前，采用原生js或者jquery时代，引用外置js文件也是惯例。

一、想要import，必先export

首先，vue是可以导入js文件的，这也是组件化开发的一部分。不过，ue要导入js文件的话，有一定的讲究，js文件本身也需要遵循一定的格式。在vue中，一个js要想可以被import的话，它一定要export一些东西。以往，js文件只要被引入，里面的函数和变量，可以毫无困难地被外界访问。但在vue中，其实是ES6体系，js的函数和变量都是私有的，一定要export出来，才能被外界访问。

common.js

const NEW = 0
const SUBMITTED = 1
const SENDED = 2

const CONTENT = 'content'
const WHO = 'who'
const LIST = 'list'

export default {
  status: { NEW: NEW, SUBMITTED: SUBMITTED, SENDED: SENDED },
  statusTxt: ['新建', '未发送', '已发送'],
  step: { CONTENT: CONTENT, WHO: WHO, LIST: LIST }
}

页面或组件中引用

import common from './common.js'

//只能访问 common.js中export出来的对象
let statusTxt = common.statusTxt[common.status.NEW]

二、export什么，就import什么

到目前为止，基本上我写的组件，或js，都是export default。但在es6语法中，export可以后接变量，或函数；一个组件或js，还可以有多个export。这里面有什么区别呢？同时，在页面或父组件中，import的时候，有2种形式：

import common from './common.js'
import { PickHandler } from './pick.js'

它们又有什么不同？
简而言之，export default每个js文件或组件，只能有一个；import的时候，不加花括号。其余的，可以多个export，import的时候需要加花括号。

test.js

export var name1 = '张三'
export function f1 () {
  return '王五'
}

var name2 = '李四'
function f2 () {
  return '钱六'
}
export { name2, f2 }

export default '都是王八蛋'

使用test.js

import all from './test.js'
import {name1,name2,f1,f2} from './test.js'

alert(`${name1}、${name2}、${f1()}、${f2()}，${all}！`)

参考文章：
认识Vue 的 export、export default、import