vue3 中引入组件的方式有：本地组件、全局组件和第三方组件。使用组件的方法包括：使用组件名称、kebab-case 名称、槽内容、传递属性和监听事件。
Vue3 如何引入和使用组件
引入组件
在 Vue3 中，有以下几种方式可以引入组件：
本地组件：在同一目录中定义和使用的组件。
立即学习“前端免费学习笔记（深入）”；
// ComponentA.vue
export default {
template: '<div>Component A</div>'
}
// App.vue <template><componenta></componenta></template>
全局组件：在 main.js 中注册，可以在应用程序的任何地方使用。
// main.js
import ComponentA from './ComponentA.vue'
Vue.component('component-a', ComponentA)
// App.vue <template><component-a></component-a></template>
第三方组件：通过 npm 安装并导入。
// 安装第三方组件
npm install --save @foo/bar-component
// App.vue
<template><bar-component></bar-component></template><script>
import { BarComponent } from '@foo/bar-component'
export default {
components: { BarComponent }
}
</script>
使用组件
引入组件后，可以通过以下方式在模板中使用它们：
使用组件名称：对于本地和全局组件。
<component-name></component-name>
使用 kebab-case 名称：对于第三方组件。
<bar-component></bar-component>
使用槽内容：通过 v-slot 传递内容。
<component><template v-slot:default> Custom content </template></component>
传递属性：通过 v-bind 传递属性值。
<component :prop-name="value"></component>
监听事件：通过 v-on 监听组件事件。
<component></component>