vue3怎么导出vue组件

在 Vue3 中，导出一个组件通常涉及创建一个单独的 `.vue` 文件，并通过 `export default` 关键字将组件导出。这里是一个简单的例子：

1. 首先，打开一个新的文件，例如 `MyComponent.vue`：

   <template>
     <div>Hello from MyComponent</div>
   </template>

   <script setup lang="ts">
   import { ref } from 'vue';

   const message = ref('Hello, Vue!');
   </script>

   <style scoped>
   /* 如果有样式，可以添加在这里 */
   </style>

2. 然后，在该文件顶部，导出组件：

   // MyComponent.vue
   export default {
     name: 'MyComponent',
     props: {},  // 如果需要外部传递属性，这里定义props
     setup(props) {
       // ...
     },
     data() {
       return {};
     },
     methods: {},  // 如果有自定义方法，这里定义
   };

3. 在其他地方引入并使用这个组件，例如在另一个 Vue 组件或 App.vue 中：

   <!-- 使用 -->
   <template>
     <MyComponent />
   </template>

   <!-- 或者在 script 中导入并注册组件 -->
   <script setup>
     import MyComponent from '@/components/MyComponent.vue';
     const myInstance = reactive({ component: MyComponent });
   </script>