export default用法vue_vue全家桶开发的一些小技巧和注意事项

export default 是 ES6 的一个语法，用于导出一个模块的默认输出。在 Vue.js 的开发中，通常用于导出一个组件或一个实例化的 Vue 实例。下面是一些使用 export default 的小技巧和注意事项：

1. 导出单文件组件

在单文件组件中，可以使用 export default 导出组件对象，例如：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

<style>
/* CSS styles here */
</style>

2. 导出实例化的 Vue 对象

有时候，我们需要在多个组件中使用同一个实例化的 Vue 对象。这时可以使用 export default 导出该对象，例如：

import Vue from 'vue'

const vm = new Vue({
  data: {
    message: 'Hello, world!'
  }
})

export default vm

然后在其他组件中，可以使用 import 导入该对象：

import vm from './myVueInstance'

console.log(vm.message) // Hello, world!

3. 注意事项

- 在一个文件中只能使用一次 export default，否则会报错。
- 在导入一个默认导出的模块时，可以省略花括号，例如：import MyComponent from './MyComponent'。
- 如果需要导出多个模块，可以使用命名导出（export），例如：export const myFunction = () => { /* ... */ }。