vue3 components 引用组件

在Vue3中，引用组件的方式与Vue2有所不同。Vue3使用了新的组件注册方法createApp()，可以通过以下步骤引用组件：

1. 在组件文件中，使用export default导出组件对象。

2. 在父组件中，使用import语句引入子组件。

3. 在父组件中，使用createApp()方法创建Vue实例，并在components选项中注册子组件。

4. 在父组件的template中使用子组件的标签名即可引用子组件。

示例代码如下：

// 子组件文件 ChildComponent.vue
<template>
<div>我是子组件</div>
</template>

<script>
export default {
name: 'ChildComponent'
}
</script>

// 父组件文件 ParentComponent.vue
<template>
<div>
<h1>我是父组件</h1>
<ChildComponent />
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import { createApp } from 'vue'

export default {
name: 'ParentComponent',
components: {
ChildComponent
}
}
</script>

// 在入口文件 main.js 中创建Vue实例
import ParentComponent from './ParentComponent.vue'
import { createApp } from 'vue'

createApp(ParentComponent).mount('#app')

在上述代码中，我们首先在子组件文件中导出了组件对象，并在父组件文件中使用import语句引入了子组件。然后，在父组件文件中使用createApp()方法创建Vue实例，并在components选项中注册了子组件。最后，在父组件的template中使用子组件的标签名ChildComponent即可引用子组件。在入口文件main.js中，我们创建了Vue实例并将其挂载到了页面上。

需要注意的是，在Vue3中，组件名不再需要使用kebab-case命名法，可以使用camelCase或PascalCase命名法。同时，组件的template选项也被废弃了，可以使用单文件组件的方式编写组件模板。