需求
上一篇章中，我们已经使用webpack构建起了vue开发渲染组件的项目。
但是如果想要调用vue组件的方法，该怎么处理呢？
使用 export default 调用 login 组件的方法
在login.vue中使用export default暴露script方法，提供执行
<template>
<div>
<h1>这是login登录组件 --- {{msg}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg: 123,
}
},
methods:{
show(){
console.log("调用login组件的show方法！")
}
},
mounted() {
this.show();
}
}
</script>
<style>
</style>
打开网页查看如下：
ES6中语法使用总结
-
使用
export default和export导出模块中的成员; 对应ES5中的module.exports和export -
使用
import ** from **和import '路径'还有import {a, b} from '模块标识'导入其他模块
下面来看看示例。
export default 示例
首先编写一个 test.js ，然后使用 export default 暴露一个对象，然后在 main.js 中导入使用。
1.编写test.js
// 使用 export default 暴露成员
export default {
info: {
name: "lisi",
age: 28
},
}
2.编写main.js导入test.js成员
// 导入test.js，设置任意变量 m1 作为导入对象
import m1 from './test.js'
console.log(m1.info); // 打印 test.js 中的 info 对象
注意：使用 export default 导入的对象变量，可以任意命名变量接收。
在浏览器查看打印信息
3.修改一下接收变量名，确认能否正常打印信息
打开浏览器如下：
4. export default 能否多次暴露呢？
发现编译的时候报错如下：
说明：export default 只允许使用一次。那么如果还想要暴露其他成员，该怎么办呢？
这时候可以使用 export
export 示例
1.使用export暴露成员变量
在上面无法使用export default暴露二次成员对象，那么可以使用 export 来暴露，如下：
// export 暴露成员对象
export var info2 = {
name: "zhangsan",
age: 30
};
2.使用花括号{变量名}来导入 export 暴露的成员变量
打开浏览器查看能否正常打印，如下：
3.export暴露的变量与import导入的变量名必须一致
如果导入的变量名不一致，则会报错，示例如下：
将接收变量名改为info3，再看看打印信息如下：
说明：
使用export暴露的成员变量 与 import导入的成员变量名称必须一致。
4.使用export暴露多个成员
同时使用 import 导入多个成员，如下：
在浏览器查看打印信息如下：
5.使用export暴露的成员，可以按需导入，对于不需要的成员，在{}可以不定义接收
6.导入export暴露的成员，可以使用as设置别名
在刚才示例中，export暴露的成员名称必须与import导入的一致。那么如果就是需要该名称呢？这时候可以使用as设置别名。
查看能否正常打印 info4 ，如下：
「更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：」
点击下面，查看更多Vue系列文章
原文始发于微信公众号（海洋的渔夫）：60.Vue export default 和 export 的使用方式
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/32983.html
