vue3怎么引入组件并使用

vue3 中引入组件的方式有：本地组件、全局组件和第三方组件。使用组件的方法包括：使用组件名称、kebab-case 名称、槽内容、传递属性和监听事件。

Vue3 如何引入和使用组件

引入组件

在 Vue3 中，有以下几种方式可以引入组件：

• 本地组件：在同一目录中定义和使用的组件。

  立即学习“前端免费学习笔记（深入）”；

  <code class="js">// ComponentA.vue
  export default {
  template: '<div>Component A</div>'
  }</code>

  <code class="js">// App.vue
  <template>
  <ComponentA />
  </template></code>

• 全局组件：在 main.js 中注册，可以在应用程序的任何地方使用。

  <code class="js">// main.js
  import ComponentA from './ComponentA.vue'
  
  Vue.component('component-a', ComponentA)</code>

  <code class="js">// App.vue
  <template>
  <component-a />
  </template></code>

• 第三方组件：通过 npm 安装并导入。

  

  mallcloud商城

  mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提

  下载

  <code class="sh">// 安装第三方组件
  npm install --save @foo/bar-component
  
  // App.vue
  <template>
  <bar-component />
  </template>
  <script>
  import { BarComponent } from '@foo/bar-component'
  
  export default {
  components: { BarComponent }
  }
  </script></code>

使用组件

引入组件后，可以通过以下方式在模板中使用它们：

• 使用组件名称：对于本地和全局组件。

  <code class="html"><component-name /></code>

• 使用 kebab-case 名称：对于第三方组件。

  <code class="html"><bar-component /></code>

• 使用槽内容：通过 v-slot 传递内容。

  <code class="html"><component>
  <template v-slot:default>
    Custom content
  </template>
  </component></code>

• 传递属性：通过 v-bind 传递属性值。

  <code class="html"><component :prop-name="value" /></code>

• 监听事件：通过 v-on 监听组件事件。

  <code class="html"><component @event-name="handlerFunction" /></code>