Vue 组件基础

组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。

什么是组件？

组件允许我们将 UI 划分为独立可复用的部分，并通过组件来对每个部分进行独立的思考。在实际应用中，一个应用的用户界面通常可以抽象为一个组件树。

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

一个简单的例子

让我们创建一个简单的按钮组件。这个组件可以记录自己被点击了多少次。

ButtonCounter.vue

vue

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">
    You clicked me {{ count }} times.
  </button>
</template>

这个文件定义了一个独立的 Vue 组件。它封装了自己的：

逻辑 (<script setup>)：一个响应式变量 count。
视图 (<template>)：一个显示 count 并监听点击事件的按钮。
样式 (<style>)（本例中未包含）：组件自身的 CSS。

使用组件

要使用这个子组件，我们需要在父组件中导入它并注册。

App.vue (父组件)

vue

<script setup>
// 1. 导入你的组件
import ButtonCounter from './components/ButtonCounter.vue'
</script>

<template>
  <h1>Here are many child components!</h1>
  <!-- 2. 使用组件 -->
  <ButtonCounter />
  <ButtonCounter />
  <ButtonCounter />
</template>

在这个例子中：

我们从 ./components/ButtonCounter.vue 导入了我们创建的组件。
在父组件的 <template> 中，我们可以像使用普通 HTML 标签一样使用 <ButtonCounter />。

当你渲染这个父组件时，你会看到三个独立的按钮。每个按钮都维护着自己的 count 状态。点击其中一个按钮，只会影响那个按钮自己的计数值，不会影响其他的按钮。

组件复用

组件可以被无限次复用。每次你使用一个组件，你就创建了一个新的实例。每个实例都管理着自己的数据，因此它们是相互独立的。

vue

<template>
  <ButtonCounter />
  <ButtonCounter />
  <ButtonCounter />
</template>

上面的代码会渲染出三个 <ButtonCounter> 组件实例。

组织组件

通常一个应用会以一棵嵌套的组件树形式来组织：

App (根组件)
├─ Layout
│  ├─ Header
│  │  └─ NavigationLinks
│  ├─ Sidebar
│  │  └─ UserProfile
│  └─ Content
│     └─ BlogPost
└─ Footer

为了让 Vue 知道在哪里渲染这些组件，我们需要在模板中正确地放置它们。通常，一个好的实践是将组件文件组织在 src/components 目录下，并根据功能进行分组。

通过将复杂的 UI 拆分成一个个独立的、可管理的组件，我们极大地提高了代码的可维护性和可复用性。

Vue 组件基础 ​

什么是组件？ ​

一个简单的例子 ​

使用组件 ​