上一篇章中,我们已经使用webpack构建起了vue开发渲染组件的项目。
image-20200314171816529
但是如果想要调用vue组件的方法,该怎么处理呢?
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
export default
和 export
导出模块中的成员; 对应ES5中的 module.exports
和 export
import ** from **
和 import '路径'
还有 import {a, b} from '模块标识'
导入其他模块下面来看看示例。
首先编写一个 test.js
,然后使用 export default
暴露一个对象,然后在 main.js
中导入使用。
image-20200314173435636
// 使用 export default 暴露成员
export default {
info: {
name: "lisi",
age: 28
},
}
image-20200314173856780
// 导入test.js,设置任意变量 m1 作为导入对象
import m1 from './test.js'
console.log(m1.info); // 打印 test.js 中的 info 对象
注意:使用 export default
导入的对象变量,可以任意命名变量接收。
在浏览器查看打印信息
image-20200314173935703
image-20200314174848875
打开浏览器如下:
image-20200314174922591
image-20200314175928609
发现编译的时候报错如下:
image-20200314180049355
说明:export default 只允许使用一次。那么如果还想要暴露其他成员,该怎么办呢?
这时候可以使用 export
在上面无法使用export default
暴露二次成员对象,那么可以使用 export
来暴露,如下:
image-20200314181044289
// export 暴露成员对象
export var info2 = {
name: "zhangsan",
age: 30
};
{变量名}
来导入 export 暴露的成员变量image-20200314181640978
打开浏览器查看能否正常打印,如下:
image-20200314181719479
如果导入的变量名不一致,则会报错,示例如下:
image-20200314181831291
将接收变量名改为info3
,再看看打印信息如下:
image-20200314182141733
说明:
使用export
暴露的成员变量 与 import
导入的成员变量名称必须一致。
export
暴露多个成员image-20200314182731504
同时使用 import
导入多个成员,如下:
image-20200314183249418
在浏览器查看打印信息如下:
image-20200314183323781
{}
可以不定义接收as
设置别名在刚才示例中,export
暴露的成员名称必须与import
导入的一致。那么如果就是需要该名称呢?这时候可以使用as
设置别名。
image-20200314183644441
查看能否正常打印 info4 ,如下: