Vue的組件為什么要export default

原文鏈接：https://www.cnblogs.com/blog-cxj2017522/p/8562536.html

 

歸結起來就是以下幾點：

 

1、Vue 是通過 webpack 實現的模塊化，因此可以使用 import 來引入模塊，這個import，export，exports default，require什么的模塊化的方法，都不是vue的API，而是webpack的API，詳見鏈接：https://webpack.docschina.org/api/module-methods 和 https://webpack.docschina.org/api/module-variables

 

2、因為是webpack的API，所以你還可以在 bulid/webpack.base.conf.js 文件中修改相關的模塊化配置：

意思是，你的模塊可以省略 ".js"，".vue"，“.json” 后綴，weebpack 會在之后自動添加上；可以用 "@" 符號代替 "src" 字符串等。

 

3.export 和export default 的區別在於：export 可以導出多個命名模塊，export default 只能導出一個默認模塊。但export default導出的模塊可以匿名，引用的時候可以自定義模塊名。

export 導出例子：

//demo1.js
export const str = 'hello world'

export function f(a){
    return a+1
}

//demo2.js 引入
import { str, f } from 'demo1'

 

export default導出例子：

//demo1.js
export default {
    a: 'hello',
    b: 'world'      
}

//demo2.js 引入
//引入的時候可以給這個模塊取任意名字，例如 "obj"，且不需要用大括號括起來。
import obj from 'demo1'

 

export 用來導出模塊，Vue 的單文件組件通常需要導出一個對象，這個對象是 Vue 實例的選項對象，以便於在其它地方可以使用 import 引入。而 new Vue() 相當於一個構造函數，在入口文件 main.js 構造根組件的同時，如果根組件還包含其它子組件，那么 Vue 會通過引入的選項對象構造其對應的 Vue 實例，最終形成一棵組件樹。