vue中 export default 与 export 写法的区别

ops/2024/10/19 11:40:17/

文章目录

    • 1、export default 用法
      • 1.1、定义函数
      • 1.2、使用
    • 2、export 用法
      • 2.1、定义函数
      • 2.1、使用
        • 1)使用方法1:一次性导入所有函数
        • 2)使用方法2:按需导入函数,使用 **大括号**
    • 3、总结

export_default__2">1、export default 用法

1.1、定义函数

d.js

const a = [{name:''张三"}]
const b = [{name:''李四"}]
export default {a,b  
}

1.2、使用

a.js

import dic from './d'   // 在一个文件中,只能导入一次export function test() {console.log('dic',dic,dic.a)
}

export default 命令用于指定模块的默认输出。一个模块只能有一个默认输出,因此 export default 命令 只能使用(导入)一次

export__28">2、export 用法

2.1、定义函数

d.js

export const a = [{name:''张三"}]
export const b = [{name:''李四"}]

2.1、使用

1)使用方法1:一次性导入所有函数

a.js

import * as dic from './d'   // * 表示一次导入所有的函数。as 表示起别名export function test() {console.log('dic',dic,dic.a)
}

这种写法 test() 输出的 dic对象与 export default 是一样的,但是区别是这里的dic是module对象,export default 的 dic 是正常对象 。

2)使用方法2:按需导入函数,使用 大括号

export 方式定义的函数,使用时,只想导入需要的函数时,要使用 大括号 。可以分多次导入。

a.js

import {a} from './d'  // 使用大括号,只导入需要的函数,可以分多次导入
import {b} from './d' export function test() {console.log('dic-a',a)
}
export function test2() {console.log('dic-b',b)
}

3、总结

  • 定义时:
    export default 定义函数时,只能出现一次;export function 可以出现多次,不限次数。

  • 使用时:
    导入 export default 定义函数时,只能导入一次。
    导入 export function 定义函数时,可以一次,也可以多次,不限次数。

  • 大括号:
    第一组 export default ,对应的 import 语句不需要使用大括号;
    第二组 export function ,对应的 import 语句 需要使用大括号

  • 导入次数
    export default 命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此 export default 命令只能使用一次,因此 import 命令后面才不用加大括号。
    export function 即可以一次性全部导入,也可以按需导入。如果是按需导入时要使用大括号。


http://www.ppmy.cn/ops/9560.html

相关文章

JavaWeb--前端工程化

目录 1. 前端工程化 1.1. 概述 1.2. 前端工程化实现技术栈 2. ECMA6Script 2.1. es6的介绍 2.2. es6 变量 / 模版字符串 2.2.1. let 与 var 的差别 2.2.2. const 与 var 的差异 2.2.3. 模板字符串 2.3. 解构表达式 / 赋值 2.3.1. 数组解构赋值 2.3.2. 对象解构赋值 …

[渗透测试学习] Headless-HackTheBox

Headless-HackTheBox 信息搜集 使用nmap扫描一下 nmap -sV -sC -v --min-rate 1000 10.10.11.8可以发现5000端口是开放的,继续扫一下目录 访问/dashboard发现只有admin才可以,我们注意到cookie值为JWT加密,拿到揭秘网站验证下猜想 cookie为user用户,那么我们要想访问必须…

Vue2进阶之Vue2高级用法

Vue2高级用法 mixin示例一示例二 plugin插件自定义指令vue-element-admin slot插槽filter过滤器 mixin 示例一 App.vue <template><div id"app"></div> </template><script> const mixin2{created(){console.log("mixin creat…

springsecurity-权限控制

一&#xff0c;**需求&#xff1a; **用户没有登录的时候&#xff0c;导航栏上只显示登录按钮&#xff0c;用户登录之后&#xff0c;导航栏可以显示登录的用户信息及注销按钮&#xff01;还有就是&#xff0c;比如admin这个用户&#xff0c;它只有 vip2&#xff0c;vip3功能&a…

JavaWeb开发06-原理-Spring配置优先级-Bean管理-SpringBoot原理-Maven继承和聚合-私服

一、Spring配置优先级 不同配置文件&#xff0c;配置同一个属性谁有效 properties>yml>yaml 命令行参数>Java系统属性 项目打包后要改变属性&#xff1a; 红色是Java系统属性&#xff0c;绿色是命令行参数 ‘ 二、Bean管理 1.获取bean 获取IOC容器&#xff1a;ap…

500道Python毕业设计题目推荐,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【智能算法】寄生捕食算法(PPA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2020年&#xff0c;AAA Mohamed等人受到自然界乌鸦-布谷鸟-猫寄生系统启发&#xff0c;提出了寄生捕食算法&#xff08;Parasitism – Predation Algorithm, PPA&#xff09;。 2.算法原理 2.1算法…

Rumble Club上线时间+配置要求+游戏价格+加速器推荐

Rumble Club上线时间配置要求游戏价格加速器推荐 Rumble Club是一款基于物理的玩家大乱斗游戏&#xff0c;该作拥有丰富饱满的视觉效果和趣味性十足的游玩极致&#xff0c;让玩家可以各种富有想象力的方式&#xff0c;推搡、戏耍好友。该作即将正式上线&#xff0c;为了避免玩…