【Vue.js】---vue中單個js文件寫法

1. vue export

介紹：

• export 語句用於從模塊中導出函數、對象或原始值，以便其他程序可以通過 import 語句使用它們。
• 無論您是否聲明，導出的模塊都處於嚴格模式。 export語句不能用在嵌入式腳本中。

export 可以導出多個命名模塊：

//demo1.js
export const string = 'hello world'
export function fun(a){
     return a+1
}

對應的引入方式：必須加大括號{}

 //demo2.js
  import { string, fun } from 'demo1'

2. vue export default

介紹：

1）只能導出一個默認模塊，這個模塊可以匿名：

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

對應的引入方式：引入的時候可以給這個模塊取任意名字，例如 "obj"，且不需要用大括號括起來。

//demo2.js
import obj from 'demo1'

2）也可以導出多個變量、方法、對象等，寫法：

// demo1.js
const PLAN_TYPE_KEY_CODE = "produce_plan_type";
// 生產計划類型
const getPlanData = () => {
   // TODO
}
// 獲取編碼規則下拉列表
const getCodeData = () => {
    // TODO
}

export default {
    PLAN_TYPE_KEY_CODE ,
    getPlanData ,
    getCodeData ,
}

對應引入方式：

// demo2.js 
import BasicDataAction from "./demo1.js";

// 使用
created() {
        BasicDataAction.getPlanData();
        BasicDataAction.getCodeData();
    },

 3. 總結

export與export default均可用於導出常量、函數、文件、模塊等，你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式，將其導入，以便能夠對其進行使用，但在一個文件或模塊中，export、import可以有多個，export default僅有一個

Tips: