vue3中一个组件如何引用另一个组件

在 Vue 3 中，一个组件引用另一个组件通常有两种方式：

1. **嵌套组件**：如果你需要将一个组件作为另一个组件的一部分直接展示，你可以使用 `<child-component>` 的形式嵌套它。例如，假设有一个名为 `Child.vue` 的组件，可以在父组件的模板里这样使用：

   <template>
     <div>
       <parent-component>
         <child-component></child-component>
       </parent-component>
     </div>
   </template>

2. **通过 props 传递数据或组件实例**：如果需要从一个组件向另一个组件传递数据或者复用某个组件的功能而不希望它们紧密耦合，可以使用 Props。父组件将数据作为 prop 传给子组件：

   <template>
     <child-component :message="parentMessage"></child-component>
   </template>

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

   export default {
     components: { ChildComponent },
     data() {
       return { parentMessage: 'Hello from parent' };
     }
   };
   </script>

3. **组件注册**：若要在应用全局范围内使用组件，可以通过 Vue 的 `<component :is="name">` 或者在 `components` 对象中注册。这适用于复用那些不会频繁改变的组件：

   // main.js 或 App.vue
   import MyCustomComponent from '@/components/MyCustomComponent.vue';
   Vue.component('my-custom-component', MyCustomComponent);

然后在其他组件中使用：

   <my-custom-component></my-custom-component>