vue3 引入自定义组件

在Vue3中引入自定义组件非常直观，通常遵循以下步骤：

1. **创建组件文件**：首先，你需要创建一个新的JavaScript文件，例如`MyComponent.vue`，并在其中编写组件的模板、样式和脚本。基本结构如下：

   <template>
     <!-- 组件的HTML结构 -->
     <div class="my-component">
       {{ message }}
     </div>
   </template>

   <script setup>
   import { ref } from 'vue';
   
   const message = ref('Hello from My Component!');
   </script>

   <style scoped>
   .my-component {
     /* 预定义组件样式 */
   }
   </style>

2. **导出组件**：在`<script setup>`标签内，确保使用`export default`声明组件，如：

   export default {
     name: 'MyComponent', // 组件名称，用于在模板中引用
     props: { // 如果需要接收外部传递的数据
       message: {
         type: String,
         default: '默认消息'
       }
     },
     setup(props) { ... } // 可选的setup函数用于更复杂的响应式数据管理
   };

3. **在父组件中使用组件**：在父组件的`<template>`中，通过`<component>`标签导入并使用该组件：

   <template>
     <div>
       <MyComponent :message="parentMessage" /> <!-- 通过props传值 -->
     </div>
   </template>

   <script>
   import MyComponent from './MyComponent.vue';

   export default {
     components: {
       MyComponent
     },
     data() {
       return {
         parentMessage: '这将是传给子组件的消息'
       };
     }
   };
   </script>

4. **使用`.vue`文件或单文件组件(SFC)**：如果项目采用预构建模式，可以直接将上述内容写在一个`.vue`文件中。如果使用的是Vue CLI构建工具，它会自动处理模块导入。