vue3 的app如何引用子组件

在 Vue3 中，引用子组件通常涉及到组件的导入和注册。首先，你需要将子组件放在单独的文件中，例如 `MyComponent.vue`：

// MyComponent.vue
<template>
  <div>这是一个子组件</div>
</template>

<script setup>
import { ref } from 'vue';
export default {
  // 可选：如果你有状态需要管理，可以使用ref或其他响应式API
  data() {
    return {};
  },
};
</script>

然后，在父组件的 `App.vue` 文件中，你可以通过 `import` 引入子组件，并在模板里使用 `<component>` 或者动态组件标签 `<component :is="currentComponent"></component>` 来显示它：

// App.vue
<template>
  <div id="app">
    <button @click="switchComponent">切换子组件</button>
    <component :is="currentComponent" />
  </div>
</template>

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

const currentComponent = ref('myComponent');

function switchComponent() {
  if (currentComponent.value === 'myComponent') {
    currentComponent.value = 'anotherComponent'; // 更改当前展示的子组件名
  } else {
    currentComponent.value = 'myComponent'; // 回到原始组件
  }
}

export default {
  components: {
    MyComponent,
    AnotherComponent: () => import('./AnotherComponent.vue'), // 如果有另一个组件
  },
  data() {
    return {};
  },
  methods: {
    switchComponent,
  },
};
</script>

在这个例子中，`currentComponent` 是一个可变的属性，控制了当前展示的是哪个子组件。当点击按钮时，会切换对应的组件。