首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >60.Vue export default 和 export 的使用方式

60.Vue export default 和 export 的使用方式

作者头像
Devops海洋的渔夫
发布2020-08-21 00:32:58
3.4K0
发布2020-08-21 00:32:58
举报
文章被收录于专栏:Devops专栏Devops专栏

需求

上一篇章中,我们已经使用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 defaultexport 导出模块中的成员; 对应ES5中的 module.exportsexport
  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 ,如下:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
  • 使用 export default 调用 login 组件的方法
    • 在login.vue中使用export default暴露script方法,提供执行
    • ES6中语法使用总结
    • export default 示例
      • 1.编写test.js
        • 2.编写main.js导入test.js成员
          • 3.修改一下接收变量名,确认能否正常打印信息
            • 4. export default 能否多次暴露呢?
            • export 示例
              • 1.使用export暴露成员变量
                • 2.使用花括号{变量名}来导入 export 暴露的成员变量
                  • 3.export暴露的变量与import导入的变量名必须一致
                    • 4.使用export暴露多个成员
                      • 5.使用export暴露的成员,可以按需导入,对于不需要的成员,在{}可以不定义接收
                        • 6.导入export暴露的成员,可以使用as设置别名
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档