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中语法使用总结

1. 使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export
2. 使用 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 ，如下：