vue3怎么引入组件并使用

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

Vue3 如何引入和使用组件

引入组件

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

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

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

  // ComponentA.vue
  export default {
  template: '<div>Component A</div>'
  }

  登录后复制

  // App.vue
  <template>
  <ComponentA />
  </template>

  登录后复制

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

  // main.js
  import ComponentA from './ComponentA.vue'
  
  Vue.component('component-a', ComponentA)

  登录后复制

  // App.vue
  <template>
  <component-a />
  </template>

  登录后复制

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

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

  登录后复制

使用组件

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

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

  <component-name />

  登录后复制

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

  <bar-component />

  登录后复制

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

  <component>
  <template v-slot:default>
    Custom content
  </template>
  </component>

  登录后复制

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

  <component :prop-name="value" />

  登录后复制

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

  <component @event-name="handlerFunction" />

  登录后复制

以上就是vue3怎么引入组件并使用的详细内容，更多请关注php中文网其它相关文章！