Vue组件定义
下面，我们来系统的梳理关于 Vue 组件定义 的基本知识点
一、组件化核心思想
组件（Component） 是 Vue 的核心功能，允许将 UI 拆分为独立可复用的代码单元。每个组件包含：
- 模板：声明式渲染结构
- 逻辑：处理数据与行为
- 样式：作用域 CSS（通过
<style scoped>）
二、组件定义方式
1. 全局组件（Vue2/Vue3 通用）
// Vue2
Vue.component('my-component', {template: '<div>全局组件</div>'
})// Vue3
const app = createApp({})
app.component('global-component', {template: `<h3>Vue3全局组件</h3>`
})
特点：
- 可在任意组件模板中使用
- 适合高频复用基础组件（如 Button、Icon）
- 命名建议：全小写+连字符（如
base-button）
2. 局部组件
// 选项式 API（Vue2/Vue3通用）
const ChildComponent = {template: `<div>子组件 {{ message }}</div>`,