Vue.js 学习笔记十:模块化开发之ES6 模块化导入导出

目录

ES6 模块化导入导出

export 使用

import 使用

export default 使用


ES6 模块化导入导出

export 使用

导出一个变量

 export var name = '小明';

导出一个函数

export function say(msg){}

常用导出方式(推荐)

// person.js
 var name = '小明'
 var age = 18
 function say(msg) {
     console.log(msg)
 }
 ​
 export {name, age, say}

as 用法

 const name = '小明';
 export {
   name as n,
   name as m
 }

可以利用 as 将模块输出多次。

某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名 这个时候就可以使用 export default

// person.js
 export default function() {
     console.log('default func')
 }
 // useperson.js
 import myFunc from './person.js'
 myFunc()

 

import 使用

首先,我们需要在 HTML 代码中引入两个 js 文件,并且类型需要设置为 module

<script src="./js/person.js" type="module"></script>
<script src="./js/useperson.js" type="module"></script>

一般用法

 import {name, age, say} from './person.js';

as 用法

 import { name as personName } from './person.js';

整体模块加载 *

//person.js
 export var name = '小明'
 export var age = 18
 export function say(msg) {
     console.log(msg)
 }
 //逐一加载
 import {name, age, say} from './person.js';
 ​
 //整体加载
 import * as person from './person.js';
 console.log(person.name);
 person.say('hi')

 

export default 使用

其实 export default,在项目里用的非常多,一般一个 Vue 组件我们都是使用 export default 命令,需要注意的是使用 export default 命令时,import 是不需要加{}的。而不使用 export default 时,import是必须加{},示例如下:

export default function() {
     console.log('default func')
 }
 ​
 ​
 import myFunc from './person.js'
 myFunc()

export default 其实是导出一个叫做 default 的变量,所以其后面不能跟变量声明语句。

注意:export default 在同一个模块中,不允许同时存在多个。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

stary1993

你的鼓励是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值