vue中 export const 和 export default的區別


我今天在群里看到這樣一個問題

 

 想到了模塊化,require和vue中的export const 和 export default

關於這個我好像有點模糊了,今天打算記錄一下,加深一下印象

搞vue的經常會見到 export const 和export default 這兩個其實就是用來將 .js文件中的內容導出,在其他文件中可以使用

使用到的文件中用import來引用一下

export default:  一個文件中只能有一個,名字叫默認導出

export const: 一個文件中可以有好多個,名字叫命名導出

import 引入 export default的時候,import name from './default文件地址';

import 引入 export const的時候,import { name1, name2 } from './const文件地址;

直接上簡單的demo

 

 我最近在看vue3.0 所以創建的一個vue3腳手架的項目,這個是目錄,

 簡單介紹一下我的想法

  HelloWorld.vue  文件中是要引入兩種不同方式創建的方法,

  moduls文件夾下的index.js文件中 是用export const 創建了兩個函數

  moduls文件夾下的index2.js文件中 是用export default創建的兩個函數

 

 然后在HelloWorld.vue文件中

 

 結果顯而易見

 

 

第二種

 

 引入:

 

 解釋一下: 這里引入的時候 getIndex2 名字是自己取得 只要下邊引用的時候不要寫錯就可以了

結果:

 

 總結一下:

  我自己的想法  在vue中 export const 使用的場景就是 像接口請求的文件就適合使用,在.vue文件中直接單獨引入 { }  可以方便以后的管理。而export default: 使用場景就是 混入開發的時候,用的比較多,

  哦  突然想起來  補充一下  export const 如果想要全部導出的話 

  有一個  import * as 命名 from './const文件夾';

  然后引用的時候 命名.getNum()  這個樣子的

有什么不對的地方,請多指教謝謝


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM