Vue中export default导出和export导出区别

最新推荐文章于 2024-07-05 11:34:10 发布

革履西装

最新推荐文章于 2024-07-05 11:34:10 发布

阅读量975

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53641562/article/details/126084043

版权

本文详细介绍了JavaScript中的`export default`和`export`的区别。一个JS模块只能有一个`export default`，但可以有多个`export`。`export default`允许自定义导入名称，而`export`则需要保持导入和导出名称一致。文章通过示例展示了如何在Vue项目中导入和使用这些导出的数据，并强调了在data中静态数据的引入方式。

摘要由CSDN通过智能技术生成

1、export default

局限，一个js文件夹只能存在一个（export default），切不能和export导出同时存在在一个js文件夹中

也就是说一个js文件夹用了（export default）就不能使用（export），可以理解为互斥

一、js文件夹
const Home = [
  {
    path: '/home',
    name: 'work',
    redirect: '/home',
    component: () => import('@/views/home/HomeIndex.vue'),
    children: [
      {
        path: '/index',
        name: 'index',
        component: () => import('@/views/home/indexPage.vue')
      }
    ]
  }
]
export default Home

二、导入
import demo from './module/index'
// 在引入使用export default导出方式的js文件夹时，导入的名字可以自定义

2、export导出

一个文件夹可以有多个export导出，

不可以自定义，导出和引入名称要一致，

// 提示

这种vue文件data里边静态文字过多的时候适合这种引入方式，保证代码简介

// js文件夹
export const man = {
  name: '杰夫贝佐斯',
  age: 54
}
export const star = {
  name: '泰勒斯威夫特',
  age: 34
}
export const woman = {
  name: '克里斯汀斯图尔特',
  age: 31
}

// 使用
<template>
  <div>
    vue
  </div>
</template>

<script>
import { man, star, woman } from './data/index'
export default {
  data () {
    return {
      man,
      star,
      woman
    }
  }
}
</script>
<style lang='scss' scoped>
</style>