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>