vue里的export default

vue里的export default相信大家看 Vue 项目肯定会看到各种导入导出 下面来介绍一下 Vue 的模块机制 Vue 是通过 webpack 实现的模块化 因此可以使用 import 来引入模块 例如 此外 你还可以在 bulid webpack base conf js 文件中修改相关配置 意思是 你的模块可以省略 js vue json 后缀 weebpack 会在之后自动添加上 可以用 符号代替 src 字符串等 export 用来导出模块 Vue 的单文件组件通常需要导出

在这里插入图片描述
  意思是,你的模块可以省略 “.js”,”.vue”,“.json” 后缀,webpack 会在之后自动添加上;可以用 “@” 符号代替 “src” 字符串等。
  
 export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数,在入口文件 main.js 构造根组件的同时,如果根组件还包含其它子组件,那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例,最终形成一棵组件树。
 
export 和export default 的区别在于:export 可以导出多个命名模块,例如:










//demo1.js export const str = 'hello world' export function f(a){ 
    return a+1 } 

对应的引入方式:

//demo2.js import { 
    str, f } from 'demo1' 

export default 只能导出一个默认模块,这个模块可以匿名,例如:

//demo1.js export default { 
    a: 'hello', b: 'world' } 

对应的引入方式:

//demo2.js import obj from 'demo1' 

引入的时候可以给这个模块取任意名字,例如 “obj”,且不需要用大括号括起来。

下面重点详细介绍一下export defaultexport 的区别.

export命令用于规定模块的对外接口。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

// profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958; 

上面代码是profile.js文件,保存了用户信息。ES6 将其视为一个模块,里面用export命令对外部输出了三个变量。

export的写法,除了像上面这样,还有另外一种。

// profile.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export { 
   firstName, lastName, year}; 

上面代码在export命令后面,使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在var语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。

export命令除了输出变量,还可以输出函数或类(class)。

export function multiply(x, y) { 
    return x * y; }; 

上面代码对外输出一个函数multiply。

export命令对外输出了指定名字的变量(变量也可以是函数或类)。

export default命令的区别:import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。

import { 
    lastName as surname } from './profile.js'; 

export default命令,为模块指定默认输出。

使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

// export-default.js export default function () { 
    console.log('foo'); } 

上面代码是一个模块文件export-default.js,它的默认输出是一个函数。

与export命令的区别:其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

// import-default.js import customName from './export-default'; customName(); // 'foo' 

上面代码的import命令,可以用任意名称指向export-default.js输出的方法,这时就不需要知道原模块输出的函数名。需要注意的是,这时import命令后面,不使用大括号。

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。所以,下面的写法是有效的。

// modules.js function add(x, y) { 
    return x * y; } export { 
   add as default}; // 等同于 // export default add; // app.js import { 
    default as foo } from 'modules'; // 等同于 // import foo from 'modules'; 

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。

总结:export命令对外接口是有名称的且import命令从模块导入的变量名与被导入模块对外接口的名称相同,而export default命令对外输出的变量名可以是任意的,这时import命令后面,不使用大括号。

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。
详情可以看一下阮一峰的https://es6.ruanyifeng.com/#docs/module#export-default-比较详细

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

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

(0)
上一篇 2026年3月16日 下午7:27
下一篇 2026年3月16日 下午7:27


相关推荐

发表回复

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

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