vue export的用法_vue export js

在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。

导出组件

假设你有一个Vue组件MyComponent.vue，你想在其他地方使用这个组件，你可以使用export default来导出它。

<template>  
  <div>  
    <h1>{{ message }}</h1>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'MyComponent',  
  data() {  
    return {  
      message: 'Hello, Vue!'  
    }  
  }  
}  
</script>  
  
<style scoped>  
h1 {  
  color: blue;  
}  
</style>

在这个例子中，export default导出了一个Vue组件对象，它包含了组件的选项，如name、data等。

导出多个内容

虽然Vue组件通常使用export default来导出，但你也可以在同一个文件中导出多个内容（如函数、变量等），这需要使用不带default的export语句。

// utils.js  
export function sayHello(name) {  
  console.log(`Hello, ${name}!`);  
}  
  
export const PI = 3.14159;

在其他文件中，你可以使用import语句来导入这些导出的内容。

// main.js  
import { sayHello, PI } from './utils';  
  
sayHello('Vue');  
console.log(PI);

命名导出与默认导出

• 默认导出（export default）：每个模块只能有一个默认导出。导入时，可以给它指定任何名称（但通常与原始名称相同）。
• 命名导出（export）：你可以在一个模块中导出多个内容，每个内容都有自己的名称。导入时，需要使用花括号{}，并指定要导入的内容的名称。

Vue中的特殊用法

在Vue项目中，export主要用于导出Vue组件，但你也可以导出其他JavaScript模块化的内容，如函数、类等。Vue CLI和Webpack等工具支持ES6模块语法，使得在Vue项目中使用export和import变得非常方便。

总之，export在Vue.js中的用法与在其他JavaScript环境中的用法相似，主要用于模块化编程，使得代码更加组织化、可重用和可维护。