vue3如何调用自定义组件

在Vue 3中，调用自定义组件通常通过组件注册、组件选项和组件实例化来完成。以下是一个基本的过程概述：

**1. 组件注册：**
首先，你需要在主应用文件（通常是`main.js`）或是在某个模块中导入并注册你的自定义组件。例如，如果你有一个名为`MyComponent.vue`的组件：

// main.js 或者 module.exports 中
import MyComponent from '@/components/MyComponent.vue';

// 注册组件
const app = createApp(App); // App是你应用的主要入口
app.component('my-component', MyComponent);

**2. 使用组件：**
在需要使用该组件的地方，你可以直接使用`<my-component>`标签引用它：

<!-- template或某个组件的child components -->
<template>
  <div>
    <my-component></my-component> <!-- 这里就是你的自定义组件 -->
  </div>
</template>

**3. 发送props和接收props：**
如果组件间需要数据传递，可以通过`props`属性进行。在组件内部声明接受的props，然后在父组件中传值：

// MyComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
export default {
  props: ['message'], // 接收父组件传递的消息
};
</script>

然后在父组件中：

<template>
  <div>
    <my-component message="Hello, Vue Component!" /> <!-- 传递消息 -->
  </div>
</template>

**4. 实例化组件：**
在某些场景下，比如动态加载组件，可以使用`<component>`标签配合`is`属性来实例化组件：

<template>
  <button @click="loadComponent">Load Component</button>
  <component :is="currentComponent" />
</template>

<script>
const components = ['MyComponent1', 'MyComponent2']; // 可选组件列表

setup() {
  const currentComponent = components[0]; // 初始组件
  const loadComponent = () => (currentComponent = components[(currentComponent === components[components.length - 1]) ? 0 : currentComponent + 1]);

  // ...
}
</script>

以上就是一个基础的Vue 3调用自定义组件的方式。记得遵循Vue的生命周期钩子和ES6语法哦。