es6_导入导出

[1]在nodejs中的导入导出

• [1]暴露出去
  • module.exports={}
• [2]引入
  • const xxx=require(‘路经’)
  • 注：若是node原生的导入不需要写路经，直接写包名即可；

[2]es6中的导入导出

(1) 默认导出

export default 输出的东西

(2) 默认导入

// 变量名随意，不需要和导出名相同
import 变量名 from ‘路径/包名’

@import url(路径)

(3) 按需导出

export {
变量名1 : 变量值2，
变量名2: 变量值2
...
}

(4) 按需导入

// 变量名必须和导出的变量名相同
import {变量名} from '路经'

(5)区别

[1] 导出数量

• 默认导出在一个页面只能导出一个变量；
  • 如果在同一个页面写了多个默认导出，结果是仅将最后一个变量导出了；
• 按需导出可以导出多个变量；

[2] 变量名

• 默认导入时的变量名不需要和导出时的变量名相同；
• 按需导入时的变量名必须和导出时的变量名相同；

(6) 举例说明

默认导入导出

• [1]创建一个test.js

    const a = 111
    export default a
  

• [2]在App.vue中使用

   <template>
      <div id="app">
         {{ count }}
      </div>
   </template>
   <script>
     // 默认导入变量名随意
     import  num from '@/test.js'
     export default {
       data: function () {
         return {
           count: num
         }
       }
     }
     </script>
  

• 页面显示111

按需导入导出

• [1]创建一个test.js

    const a = 111
    export { a }
  

• [2]在App.vue中使用

   <template>
      <div id="app">
         {{ count }}
      </div>
   </template>
   <script>
     // 按需导入变量名必须与按需导出时相同
     import  { a } from '@/test.js'
     export default {
       data: function () {
         return {
           count: a
         }
       }
     }
     </script>
  

• 页面显示111

同时按需与默认

• [1]创建一个test.js

    const a = 111
    const b = 222
    export { a }
    export default b
  

• [2]在App.vue中使用

   <template>
      <div id="app">
         {{ count1 }}
         {{ count2 }}
      </div>
   </template>
   <script>
     // 在一个文件中可以同时导出与按需导出
     import  b,  { a } from '@/test.js'
     export default {
       data: function () {
         return {
           count1: a,
           count2: b
         }
       }
     }
     </script>
  

• 页面显示111 222