一 Vue.js模块化概述
Vue.js使用了ES6模块机制中的import和export关键词来导入导出模块,模块化的目的是一是隐藏代码实现细节,让不同来源的代码块,可以组成要程序;二是避免代码块重写其他代码块的变量或函数,防止污染数据。
注意,在Node 13之前,Node环境下的JavaScript使用全局exports对象进行导入导出,为倡导JavaScript的模块机制,Node 13之后开始支持ES6的模块,本文只讨论ES6的模块机制的用法。
构建一个Vue.js脚手架项目用于示例,在项目src源代码文件夹内,新建一个export的文件夹,并创建一个index.js,用于导出数据,使用App.vue来导入数据。
二 export 导出用法
2.1 常规导出
如果想从模块导出常量、变量、函数或类,只要在声明前加上export关键字即可。
示例 //index.js
// 导出常量
export const Num = 100;
// 导出字符串变量
export let str = 'Hello World!'
// 导出数组
export let arr = [1, 3, 5, 7, 9]
//导出对象
export let obj = {
name: '张三',
age: 20,
say() {
alert(this.name)
}
}
// 导出函数
export function add(a,b){
return a+b
}
复制代码
也可以不加关键词export,先正常定义常量、变量等,然后在只用一个export导出需要的值,上诉代码也等同于下面这行代码:
// 定义常量 const Num = 100; // 定义字符串变量 let str = 'Hello World!' // 定义数组 let arr = [1, 3