60.Vue export default 和 export 的使用方式
需求
上一篇章中,我们已经使用webpack构建起了vue开发渲染组件的项目。
image-20200314171816529
但是如果想要调用vue组件的方法,该怎么处理呢?
使用 export default 调用 login 组件的方法
在login.vue
中使用export default
暴露script
方法,提供执行
image-20200314172250692
<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>
打开网页查看如下:
image-20200314172351754
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
image-20200314173435636
// 使用 export default 暴露成员
export default {
info: {
name: "lisi",
age: 28
},
}
2.编写main.js导入test.js成员
image-20200314173856780
// 导入test.js,设置任意变量 m1 作为导入对象
import m1 from './test.js'
console.log(m1.info); // 打印 test.js 中的 info 对象
注意:使用 export default
导入的对象变量,可以任意命名变量接收。
在浏览器查看打印信息
image-20200314173935703
3.修改一下接收变量名,确认能否正常打印信息
image-20200314174848875
打开浏览器如下:
image-20200314174922591
4. export default 能否多次暴露呢?
image-20200314175928609
发现编译的时候报错如下:
image-20200314180049355
说明:export default 只允许使用一次。那么如果还想要暴露其他成员,该怎么办呢?
这时候可以使用 export
export 示例
1.使用export暴露成员变量
在上面无法使用export default
暴露二次成员对象,那么可以使用 export
来暴露,如下:
image-20200314181044289
// export 暴露成员对象
export var info2 = {
name: "zhangsan",
age: 30
};
2.使用花括号{变量名}
来导入 export 暴露的成员变量
image-20200314181640978
打开浏览器查看能否正常打印,如下:
image-20200314181719479
3.export暴露的变量与import导入的变量名必须一致
如果导入的变量名不一致,则会报错,示例如下:
image-20200314181831291
将接收变量名改为info3
,再看看打印信息如下:
image-20200314182141733
说明:
使用export
暴露的成员变量 与 import
导入的成员变量名称必须一致。
4.使用export
暴露多个成员
image-20200314182731504
同时使用 import
导入多个成员,如下:
image-20200314183249418
在浏览器查看打印信息如下:
image-20200314183323781
5.使用export暴露的成员,可以按需导入,对于不需要的成员,在{}
可以不定义接收
6.导入export暴露的成员,可以使用as
设置别名
在刚才示例中,export
暴露的成员名称必须与import
导入的一致。那么如果就是需要该名称呢?这时候可以使用as
设置别名。
image-20200314183644441
查看能否正常打印 info4 ,如下:
- Redis主从复制下的工作原理梳理
- Linux系统下常用的数据备份方法
- K2 的Workspace 遭遇400 RequestLength 错误修复
- 从零开始学人工智能-Python·决策树(三)·节点
- .net程序员使用Oracle新手上路指南
- python的函数(二):作用域
- 在win2008 r2中安装windows phone 7开发工具
- TFS2008 + Windows2003 + Sql2005 安装注意事项
- 机器学习(五)——k-近邻算法进一步探究
- openstack上创建vm实例后,状态为ERROR问题解决
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(5)--问题解决
- 全国首创!今天起,杭州“刷”的一下就能直接乘地铁
- 2018年前端技术趋势预览
- SQL SERVER 内存分配及常见内存问题 简介
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 消息提示时间的格式化例子(小程序)
- 【Spark】用scala2.11编译打包构建镜像
- 移动端事件穿透的原理与解决方案
- 你被追尾了
- 深入理解JavaScript作用域
- 《闲扯Redis七》Redis字典结构的底层实现
- 深入理解JavaScript闭包之什么是闭包
- 按需取余
- Cypress 获取table内容动态tr和td
- Java 并发编程之 ConcurrentHashMap 源码分析(小长文)
- python的安装
- 【源码分析】SpringBoot2中取代Druid的超级连接池:HikariCP之ConcurrentBag
- HTML5项目实战之旅行社网站——PC端固定布局
- HTML5项目实战之旅行社网站——移动端流体布局
- HTML5项目实战之旅行社网站——兼容响应式布局