在 Vue 中使用 export 命令可以實現將組件、方法、對象等導出,以供其他模塊使用。export 命令可以將一個模塊的多個導出語句合并成一個對象。
//示例代碼 export const name = 'Tom'; export function sum(a, b) { return a + b; } export class Person { constructor(name, age) { this.name = name; this.age = age; } }
可以看到,在示例代碼中我們導出了一個字符串、一個函數和一個類,使用 import 命令可以引入這些導出的內容。
//示例代碼 import { name, sum, Person } from 'module.js'; console.log(name); console.log(sum(1, 2)); let p = new Person('Mike', 18); console.log(p.name, p.age);
在實際開發中,一般將一個組件作為一個模塊導出,以便其他模塊可以引用并使用該組件。實現方法如下:
//示例代碼Hello Vue.js
導出組件時,需要注意 component 對象,需要使用 export default 命令將 component 對象導出。在模塊中需要使用 import 導入模塊,并在 template 中使用該組件。