组件基本概念

组件系统是 Vue 构建用户界面的基础。

什么是组件

组件是可复用的 Vue 实例，包含：

• 模板（HTML 结构）
• 逻辑（JavaScript 代码）
• 样式（CSS 样式）

定义组件

对象形式

const MyComponent = {
  data() {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">点击 {{ count }}</button>'
}

单文件组件（SFC）

<template>
  <button @click="count++">点击 {{ count }}</button>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>

注册组件

全局注册

app.component('my-component', MyComponent)

局部注册

export default {
  components: {
    MyComponent
  }
}

使用组件

<MyComponent />
<!-- 或 -->
<my-component></my-component>

组件名推荐使用 PascalCase 或 kebab-case。

要点总结

• 组件封装了可复用的 UI 单元
• 支持全局注册和局部注册
• 单文件组件（.vue）是推荐的开发方式
• 组件名可用 PascalCase 或 kebab-case