vue 里面 export/import js文件

待我称王封你为后i 2022-08-31 09:51 129阅读 0赞

*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}！`)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]

参考文章：  
[认识Vue 的 export、export default、import][Vue _ export_export default_import]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/3b4ea28b6a0846f5993bc2855b8a3061.png
[Vue _ export_export default_import]: https://blog.csdn.net/harry5508/article/details/84025146