Vue3.0主页调用子组件

在Vue3.0中，调用子组件的方式与Vue2.x基本相同。以下是一个简单的示例：

在父组件中引入子组件：

import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  // ...
}

在父组件模板中使用子组件：

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

请注意，Vue3.0中的组件名称应该使用kebab-case（短横线连接）的形式，而不是camelCase（驼峰式）的形式。因此，在父组件中引用子组件时，应该使用kebab-case的命名方式，如上面的示例所示。

另外，Vue3.0中的组件选项中已经没有了“template”选项，因此，我们需要使用“setup”函数来定义组件的逻辑。在“setup”函数中，可以通过“h”函数来创建子组件的虚拟节点，例如：

import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    return {
      child: () => h(ChildComponent)
    }
  }
}

然后，在父组件的模板中，可以通过调用“child”函数来渲染子组件：

<template>
  <div>
    { child() }
  </div>
</template>

当然，这种方式比较麻烦，一般情况下还是推荐使用模板的方式来调用子组件。