Vue的export default

最新推荐文章于 2025-06-15 09:55:55 发布

Akiode

最新推荐文章于 2025-06-15 09:55:55 发布

阅读量792

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42553164/article/details/83380966

本文详细解析了Vue项目中频繁出现的ES6模块语法，重点介绍了export、import及export default的使用方法，帮助读者更好地理解Vue项目构建与模块间的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看别人Vue的项目时，老是遇到各种奇奇怪怪的语法，后来一看，都是ES6的语法，所以我们认认真真的把ES6熟读，才能更好的理解Vue的搭建。

1、export default 和 import 以及 export

这两个都是构成模块功能的主要命令，因此会频繁的出现，理解他以后会更好的理清各模块的关系。

export 和 export default 是规定模块对外的接口，输出的变量可以在别的模块用import接收

// app.vue

js部分
<script>
// 引入要用的组件，这里引入了两个组件
import componentA from '@/components/myHeader';
import Fa from './components/f';

// 这里表示对外输出的数据，但是同时也代表在页面本身的注册
export default {
  name: 'App',
  // 一定要注册引入的组件
  components:{
    componentA,            //这是es6的简写，相当于componentA:componentA
    Fa
  },
   // 要注意的是，data选项一定是函数
  data( ) {          
    return {             
      msg:"这里的变量是注册了的，能用在页面本身"
    };
  }
}
</script>

HTML部分

<div>
  {{ msg }}       //在export default定义了，所以可以使用
</div>