认识Vue 的 export、export default、import

认识Vue 的 export、export default、import首先要知道 export import exportdefaul 是什么 nbsp 作为 copy 砖家 具体概念我还真是迷糊 查阅资料 ES6 模块主要有两个功能 export 和 import export 用于对外输出本模块 一个文件可以理解为一个模块 变量的接口 import 用于在一个模块中加载另一个含有 export 接口的模块 也就是说使用 export 命令定义了模块的对外接口以后 其他 JS

首先要知道export,import ,export default是什么

 

作为copy砖家,具体概念我还真是迷糊…

查阅资料:ES6模块主要有两个功能:export和import
-export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
-import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都是ES6的语法。


一、export和import(一个导出一个导入)

一个a.js文件有如下代码:

export var name="李四";

在其它文件里引用如下:

 

import { name } from "/.a.js" //路径根据你的实际情况填写 export default { data () { return { } }, created:function(){ alert(name)//可以弹出来“李四” } }

 

上面的例子是导出单个变量的写法,如果是导出多个变量就应该按照下边的方法,用大括号包裹着需要导出的变量:

 var name1="李四"; var name2="张三"; export { name1 ,name2 } 
在其他文件里引用如下:

 

import { name1 , name2 } from "/.a.js" //路径根据你的实际情况填写 export default { data () { return { } }, created:function(){//create:打开文件默认执行的方法 alert(name1)//可以弹出来“李四” alert(name2)//可以弹出来“张三” } }

 

如果导出的是个函数呢,那应该怎么用呢,其实一样,如下

function add(x,y){ alert(x*y) // 想一想如果这里是个返回值比如: return x-y,下边的函数怎么引用 } export { add }

在其他文件里引用如下:

 

import { add } from "/.a.js" //路径根据你的实际情况填写 export default { data () { return { } }, created:function(){ add(4,6) //弹出来24 } }

 

二、export与export default

export跟export default 有什么区别捏?如下:

这样来说其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

 

var name="李四"; export { name } //import { name } from "/.a.js" 可以写成: var name="李四"; export default name //import name from "/.a.js" 这里name不需要大括号

 

 

再看第3条,在一个文件或模块中,export、import可以有多个,export default仅有一个,也就是说如下代码:

var name1="李四"; var name2="张三"; export { name1 ,name2 }

 

也可以写成如下,也是可以的,import跟他类似。

 var name1="李四"; var name2="张三"; export name1; export name2;

————————————–==》点滴积累。

1.1*1.1*1.1*1.1*…=无限大…

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/233115.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 自我介绍

    自我介绍

    2021年7月31日
    51
  • java简单入门教程_史上最快速最简单的java入门教程

    java简单入门教程_史上最快速最简单的java入门教程原标题:史上最快速最简单的java入门教程§java是什么?Java是一门开发软件的程序语言,用于编写比如:办公自动化软件、超市的销售系统、银行交易系统等程序软件.§准备写Java程序。准备工作分为三步:第一步:下载安装JDK开发环境(建议官网下载),基本都是下一步。第二步:配置JDK环境变量,主要配置bin和classpath(主要为了在控制台能方便执行程序。如果不怕麻烦,此步可以省略)。具体…

    2022年7月8日
    22
  • ‘hibernate.dialect’ must be set when no Connection avalable’

    ‘hibernate.dialect’ must be set when no Connection avalable’

    2021年9月10日
    51
  • 数据库课程设计

    图书管理系统1.概述项目背景2.需求分析2.1系统需求2.2数据需求2.3数据字典2.3.1书籍信息表2.3.2库存信息表2.3.4顾客信息表2.3.5管理员信息表2.3.6图书类型信息表2.3.7订单详细信息表3.数据库设计3.1…

    2022年4月3日
    40
  • 十大开源视频会议「建议收藏」

    十大开源视频会议「建议收藏」视频会议及流媒体十大开源项目 在视频会议领域,有许多可以值得参考的开源项目,这些开源项目有的是协议栈、有的是编码器或者是传输协议,由于视频会议系统是一个综合性的应用系统,里面包含功能较多,如能把这些开源项目选择性的加入我们的视频会议开发当中,我们的开发效率肯定会事半功倍,下面我们列举一下视频会议相关的十大开源项目,并对其重要性及优缺点做一个全面的评价与排名。1、 OpenH323项

    2022年7月12日
    85
  • vscode怎么直接运行html_vscode怎么创建项目

    vscode怎么直接运行html_vscode怎么创建项目首先新建一个html文件,取名后缀为XXX.html,如图建好文件之后是空的,然后输入!同时按下tab键就自动生成html目录了目录建好后怎么运行呢?打开扩展商店,输出op就出来了,选择第一个openinbrowser安装安装好了之后就可以运行啦,快捷键是alt+b,当然也可以在项html文件中点击鼠标右键来运行,如图然后选择浏览器来运行,推荐最好选择谷歌,运行效果如下最后有人问,这个中文是怎么设置的?也是在应用商店里面搜索language然后选择中文的下载然后重新启动VSCo

    2022年8月22日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号