Vue.js 组件全面学习指南-开发者社区

1 学习指南

1.1 学习目标

认知层级	目标描述	对应章节
了解	掌握组件化开发思想与核心价值	2.1 组件化思想
掌握	组件注册、父子通信基础用法	3.1-3.2、4.1-4.2
熟练	高级组件特性与复杂场景应用	4.3-4.5、6.0
应用	独立完成中型项目组件拆分与实现	5.0 实战案例

1.2 前置知识

掌握 Vue 基础语法（模板、指令、响应式数据）

了解 ES6 + 语法（解构、箭头函数、模块化）

具备 HTML/CSS 基础

2 组件的简介

组件是 Vue.js 的核心概念，是可复用的 Vue 实例，相当于页面的 “功能积木”。将复杂页面拆分为独立、可复用的组件，能实现：

代码模块化：单个组件专注单一功能，维护成本降低

复用性提升：同一组件可在多个页面重复使用

协作高效：多人开发时可并行开发不同组件

组件的本质是 “独立的视图 + 逻辑单元”，类比现实中的 “乐高积木”—— 每个积木有固定功能（比如轮子、车身），组合起来形成完整模型（应用）。

3 组件的使用

3.1 组件注册方式

3.1.1 全局注册（全局可用）

// main.js import { createApp } from 'vue' import App from './App.vue' import GlobalComponent from './components/GlobalComponent.vue' const app = createApp(App) // 全局注册：所有组件均可直接使用 app.component('GlobalComponent', GlobalComponent) app.mount('#app')

3.1.2 局部注册（仅当前组件可用）

<LocalComponent /> 局部组件只能在当前父组件使用 --> > // 局部注册：导入即注册，无需额外配置 import LocalComponent from './LocalComponent.vue' </script>

3.2 组件使用规范

注册方式对比

注册方式	适用场景	优点	缺点	最佳实践
全局注册	通用基础组件（如 Button/Icon）	全局可直接使用，无需导入	增加打包体积，未使用组件无法 Tree-Shaking	注册不超过 5 个核心基础组件
局部注册	业务组件（如 TodoInput/TodoItem）	按需导入，减小打包体积	需手动导入后使用	业务模块优先使用，配合自动导入插件

组件名建议使用kebab-case（短横线分隔），如todo-item

单文件组件（SFC）统一后缀为.vue，包含<template>/<script>/` 三部分

样式隔离：在标签添加scoped` 属性，避免样式污染

4 组件之间的通信

组件通信是组件协作的核心，Vue3 提供了多种通信方案，重点关注父子组件通信。

4.1 父组件向子组件通信（已完成）

核心方案：Props 传递（单向数据流：父传子，子不可直接修改 props）

Parent.vue --> > :username="userName" :age="userAge" /> <script setup> import { ref } from 'vue' import ChildComponent from './ChildComponent.vue' const userName = ref('张三') const userAge = ref(18) </script> 组件 ChildComponent.vue --> <template> <p>姓名：{{ username }}</p> <p>年龄：{{ age }}</p> > // 定义props并指定类型、默认值、必填项 const props = defineProps({ username: { type: String, required: true }, age: { type: Number, default: 18 // 未传递时使用默认值 } }) </script>

4.2 子组件向父组件通信

核心方案：自定义事件（$emit），类比 “儿子向父亲汇报情况”，子组件触发事件，父组件监听并处理。

4.2.1 基础用法（3 步实现）

子组件声明可触发的事件（defineEmits）

子组件触发事件（emit('事件名', 数据)）

父组件监听事件（@事件名="处理函数"）

<!-- 子组件 ChildComponent.vue --> ="sendMessage">向父组件发送消息 ="inputValue" placeholder="输入要传递的内容" /> <script setup> import { ref } from 'vue' // 1. 声明可触发的事件（支持多个，数组形式） const emit = defineEmits(['message-sent', 'value-change']) const inputValue = ref('') // 2. 触发事件：第一个参数是事件名，后续是传递的数据 function sendMessage() { emit('message-sent', '子组件问候：你好，父组件！') // 传递字符串 emit('value-change', inputValue.value) // 传递输入框值 } .vue --> @message-sent="handleMessage" @value-change="handleValueChange" /> 的消息：{{ parentMessage }}</p> <p>父组件接收的输入值：{{ parentValue }}</p> > import { ref } from 'vue' import ChildComponent from './ChildComponent.vue' const parentMessage = ref('') const parentValue = ref('') // 3. 监听事件并处理数据 function handleMessage(msg) { parentMessage.value = msg } function handleValueChange(val) { parentValue.value = val } #### 4.2.2 进阶用法：v-model双向绑定（语法糖） `v-model`是`props + emit`的组合，适用于“父子组件数据同步”场景（如自定义输入框）： ```vue <!-- 子组件 CustomInput.vue --> :value="modelValue" @input="emit('update:modelValue', $event.target.value)" /> 接收父组件v-model传递的value（默认名modelValue） defineProps(['modelValue']) // 声明更新事件（固定格式：update:modelValue） const emit = defineEmits(['update:modelValue']) .vue --> ：Value="searchText" @update:modelValue="searchText = $event" /> --> v-model="searchText" /> 搜索内容：{{ searchText }}</p> > import { ref } from 'vue' import CustomInput from './CustomInput.vue' const searchText = ref('')

4.2.2 注意事项

事件名建议使用kebab-case（短横线分隔），与组件名规范一致

可传递任意类型数据（字符串、对象、数组等）

子组件不可直接修改父组件数据，必须通过 “触发事件” 让父组件自行修改（遵循单向数据流）

5 组件实战案例：TodoList 任务清单

5.1 案例需求

实现一个简易 TodoList，包含功能：

父组件管理任务列表（数据存储）

子组件 1（TodoInput）：输入任务并添加到列表（子传父）

子组件 2（TodoItem）：展示单个任务，支持删除功能（子传父）

父组件向子组件传递任务数据（父传子）

5.2 代码实现

5.2.1 目录结构

src/ ├── components/ │ ├── TodoInput.vue // 任务输入组件（子） │ └── TodoItem.vue // 单个任务组件（子） └── App.vue // 父组件（任务列表管理）

5.2.2 子组件 1：TodoInput.vue（添加任务）

-input"> v-model="newTodo" placeholder="请输入新任务" @keyup.enter="addTodo" /> click="addTodo">添加</button> </div> { ref } from 'vue' const emit = defineEmits(['add-todo']) // 声明添加事件 const newTodo = ref('') function addTodo() { if (newTodo.value.trim()) { // 传递任务对象给父组件 emit('add-todo', { id: Date.now(), // 用时间戳作为唯一ID content: newTodo.value, done: false }) newTodo.value = '' // 清空输入框 } } <style scoped> .todo-input { margin: 20px 0; display: flex; gap: 10px; } input { flex: 1; padding: 8px; } button { padding: 8px 16px; background: #42b983; color: white; border: none; border-radius: 4px; cursor: pointer; } </style>

5.2.3 子组件 2：TodoItem.vue（单个任务）

<template> class="todo-item"> done: todo.done }" @click="toggleDone"> {{ todo.content }} ="deleteTodo">删除</button> > <script setup> const props = defineProps({ todo: { type: Object, required: true, // 验证todo对象结构 validator: (value) => { return 'id' in value && 'content' in value && 'done' in value } } }) const emit = defineEmits(['delete-todo', 'toggle-done']) // 触发删除事件（传递任务ID） function deleteTodo() { emit('delete-todo', props.todo.id) } // 触发状态切换事件 function toggleDone() { emit('toggle-done', props.todo.id) } </script> oped> .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #eee; } .done { text-decoration: line-through; color: #999; } button { background: #ff4444; color: white; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; }

5.2.4 父组件：App.vue（核心管理）

<template> 1>TodoList 任务清单 ：输入任务（子传父：添加任务） --> add-todo="handleAddTodo" /> 子组件2：展示任务（父传子：任务数据；子传父：删除/切换） --> todo-list"> <TodoItem v-for="todo in todoList" :key="todo.id" :todo="todo" @delete-todo="handleDeleteTodo" @toggle-done="handleToggleDone" /> </div> > import { ref } from 'vue' import TodoInput from './components/TodoInput.vue' import TodoItem from './components/TodoItem.vue' // 父组件维护任务列表（响应式数据） const todoList = ref([ { id: 1, content: '学习Vue组件通信', done: false }, { id: 2, content: '完成实战案例', done: false } ]) // 处理添加任务（接收子组件传递的任务对象） function handleAddTodo(newTodo) { todoList.value.push(newTodo) } // 处理删除任务（接收子组件传递的任务ID） function handleDeleteTodo(todoId) { todoList.value = todoList.value.filter(todo => todo.id !== todoId) } // 处理切换任务状态（接收子组件传递的任务ID） function handleToggleDone(todoId) { const todo = todoList.value.find(todo => todo.id === todoId) if (todo) todo.done = !todo.done } </script> scoped> h1 { color: #333; } .todo-list { border: 1px solid #eee; border-radius: 4px; padding: 10px; }

`5.3 案例效果`

- 输入任务内容，点击“添加”或按回车，任务会添加到列表（子传父）

- 点击任务文本，切换完成状态（子传父触发状态更新）

- 点击“删除”按钮，移除对应任务（子传父触发删除）

- 父组件通过props将任务数据传递给`TodoItem`组件（父传子）

`5.4 案例核心知识点总结`

1. 组件拆分：按功能拆分为“输入组件”“列表项组件”“父组件”，职责单一

2. 父传子：通过props传递任务数据、配置项

3. 子传父：通过自定义事件传递操作（添加/删除/切换）和数据（任务ID/对象）

4. 响应式数据：父组件维护核心数据，子组件仅负责展示和触发事件

如果需要补充某部分细节（如 TypeScript 支持、组件复用技巧），或想扩展其他实战案例（如购物车、表单组件），可以随时告诉我！

Vue.js 组件全面学习指南