Vue3 组件_基于vue3的组件csdn-CSDN博客

本文链接：https://blog.csdn.net/q_dgsdfklt4345/article/details/136174215

本文详细介绍了Vue3中的组件概念，包括如何使用createApp配置根组件，组件的挂载过程，以及如何注册和调用全局组件。通过实例展示了如何在实际项目中应用这些技术。

摘要由CSDN通过智能技术生成

Vue3 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

以下实例我们将 Vue 应用挂载到 <div id="app"></div>，应该传入 #app：

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

注册一个全局组件语法格式如下：

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-name 为组件名，/* ... */ 部分为配置选项。注册后，我们可以使用以下方式来调用组件：

<my-component-name></my-component-name>

一个简单的 Vue 组件的实例：

注册一个简单的全局组件 runoob，并使用它：

<div id="app"> <runoob></runoob> </div> <script> // 创建一个Vue 应用 const app = Vue.createApp({}) // 定义一个名为 runoob的新全局组件