认识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)
上一篇 2025年8月14日 下午2:01
下一篇 2025年8月14日 下午2:22


相关推荐

  • CompoundButton 选中/未选中状态的按钮「建议收藏」

    CompoundButton 选中/未选中状态的按钮「建议收藏」正文  一、结构    publicabstractclassCompoundButtonextendsButtonimplementsCheckable     java.lang.Object      android.view.View        android.widget.TextView          android.widge

    2022年5月6日
    77
  • TP90、TP95、TP99性能指标含义及计算

    TP90、TP95、TP99性能指标含义及计算前言在性能测试中 我们经常会选择 TP90 TP95 或者 TP99 等水位线作为性能指标 首先 我们先解释一下 TP90 TP95 和 TP99 的含义 TP90 toppercent90 即 90 的数据都满足某一条件 TP95 toppercent95 即 95 的数据都满足某一条件 TP99 toppercent99 即 99 的数据都满足某一条件 在这里 我们之所以说其 满足某一条件 是因为在计算的时候 我们既可以向前计算也可以向后计算 例如 1 2 3

    2026年3月18日
    2
  • 新固态显示不出来,新固态硬盘不显示

    新固态显示不出来,新固态硬盘不显示

    2026年3月14日
    2
  • html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记…[通俗易懂]

    html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记…[通俗易懂]全文参考:https://github.com/iuap-design/blog/issues/38、MDNclientHeight,只读clientHeight可以用公式CSSheight+CSSpadding-水平滚动条的高度(如果存在)来计算。如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(pad…

    2022年7月23日
    13
  • indexedDB简单介绍

    indexedDB简单介绍indexedDB 一 其它几种前端存储 1 cookieHTTPco 通常也叫作 cookie 最初用于在客户端存储会话信息 这个规范要求服务器在响应 HTTP 请求时 通过发送 Set CookieHTTP 头部包含会话信息 例如 下面是包含这个头部的一个 HTTP 响应 HTTP 1 1200OKConten type text htmlSet Cookie name valueOther header other header value 这个 HTTP

    2026年3月17日
    2
  • 折半插入排序算法

    折半插入排序算法折半插入排序 BinaryInsert 是对插入排序算法的一种改进 所谓插入排序 就是不断的依次将元素插入前面已排好序的序列中 由于前半部分为已排好序的数列 这样我们不用按顺序依次寻找插入点 可以采用折半查找的方法来加快寻找插入点的速度 具体操作 在将一个新元素插入已排好序的数组的过程中 寻找插入点时 将待插入区域的首元素设置为 a low 末元素设置为 a high 将待插入元素与 a mid 其中 mid low high low 2 相比较 如果比参考元素小 则选择 a

    2026年3月19日
    1

发表回复

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

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