本文介绍一个 Vue 古诗列表展示组件案例，涵盖父组件向子组件传递数据、v-for 循环渲染、props 类型验证与自定义验证器等核心技能。子组件通过 slice(0, num) 限制显示数量，并设置唯一 key 提升渲染效率；props 定义 poemArr（必填数组，需含 author 与 describe 字段）和 num（默认 2，范围 1-3）。父组件维护诗歌数据数组并动态绑定给子组件。案例还展示了 scoped 样式隔离、卡片式布局与配色方案，并给出扩展建议（动态数量、搜索过滤）。读者可掌握 Vue 组件通信、列表渲染、数据切片及验证器写法，适合初学 Vue 组件开发时练习。
Vue 中除静态绑定 props 外，可用 v-bind 或其简写 `:` 动态传值，支持字符串、数字、布尔值、数组、对象、表达式和响应式数据。对象有两种绑定方式：`v-bind="obj"` 会展开对象属性，子组件需分别声明匹配的 props；`:init="obj"` 则传递完整对象，子组件只声明一个 prop 并通过点语法访问。使用 reactive 或 ref 创建的数据修改后会自动更新子组件。注意对象为引用传递，子组件直接修改会影响父组件，需浅拷贝或深拷贝；props 可做类型校验，且应遵循单向数据流。属性独立时选分别绑定，复杂配置选完整对象传递。
Vue 中父组件通过 props 向子组件传递数据，实现组件间通信与数据共享。静态绑定时属性值默认为字符串，通过组件标签属性传参；子组件需用 defineProps 声明接收，否则数据被忽略。props 遵循单向数据流，子组件不可直接修改，需通过事件通知父组件；同时支持类型验证、必填、默认值及自定义校验。命名上子组件声明用 camelCase，模板中使用推荐 kebab-case。动态绑定可用 v-bind（:num="值"）传递变量或表达式，且能保留非字符串类型。Props 为响应式，父组件数据变化会自动同步。该机制保证了数据流可预测性和组件复用性。
Vue 默认组件样式全局生效，容易造成样式冲突。文章介绍 scoped CSS：为 style 添加 scoped 后，Vue 会给元素加唯一 data-v-xxx 属性并适配选择器，样式仅作用于当前组件及子组件根元素。父组件 scoped 不会渗透子组件内部；子组件根元素同时受父子 scoped 影响，内部元素仅受自身 scoped 影响。需影响子组件时可用 ::v-deep、/deep/、:deep()，也可用 CSS Modules。注意全局样式不应 scoped，避免过度使用，scoped 有少量运行时开销，第三方库样式可能需深度选择器。由此实现组件样式隔离，避免冲突。
该文演示 Vue 3 中组件的两种注册方式：全局注册通过 `app.component()` 在应用启动时完成，适用于按钮、输入框等通用组件，可在任何模板中使用；局部注册通过 `import` 导入，在 `script setup` 下自动注册，仅限当前组件使用，代码更清晰、避免命名冲突。父组件在模板中以标签形式引用子组件，标签名可使用短横线或帕斯卡命名，且需与注册名对应。示例包含全局组件（实线边框）与局部组件（虚线边框），在父组件中并排显示。关键要点包括：按使用场景选择注册方式，`script setup` 自动注册已导入组件，父组件引用子组件形成父子关系，同时应避免组件自引用或循环引用以防死循环。
本文介绍了一个基于 Vue 3 和 Bootstrap 5 开发“学习计划表”应用的完整案例。项目通过 VSCode 搭建，引入 Bootstrap CDN 样式，并实现以下核心功能：使用 `v-for` 动态渲染表格数据，展示序号、科目、内容、地点、完成状态和操作列；通过 `v-model` 绑定完成状态开关，并用动态 `id` 与 `label` 关联解决点击文字无法切换状态的问题；删除功能限定只有“已完成”的计划才能删除，否则弹出提示；新增计划通过表单提交实现，包含必填校验、`v-model.trim` 去除首尾空格，以及下拉框动态选项。案例覆盖 Vue 常用指令和事件绑定、修饰符等关键知识点，适合练习组件内数据管理、条件渲染和表单交互，最终提供可直接复用的完整代码。
本文介绍了Vue应用的两个核心文件。Main根文件通过`createApp(App).mount('#app')`创建应用，并将根组件App挂载到index.html中id为app的容器内。App.vue是根组件，文件结构由三部分组成：`<template>`用于编写HTML，`<script lang="ts">`用于编写JavaScript或TypeScript，`<style>`用于编写CSS。这清晰展示了Vue单文件组件的基本组织方式及应用启动流程。
使用Vite创建Vue项目时，可参考官方快速上手文档，执行`npm create vue@latest`命令生成项目。常见问题：首次打开项目会报错，原因是项目尚未安装依赖，需运行`npm i`安装所有依赖后即可正常使用。
该文章展示了Vue 3组合式API中三个常见的界面渲染示例：下拉菜单、列表渲染和表格渲染。下拉菜单通过`v-model`绑定`select`选项，并利用`v-for`遍历数组生成选项，实现选择反馈。列表渲染使用`v-for`遍历对象数组，显示每条数据的id、名称与描述，支持重复数据。表格渲染结合`v-for`与`<table>`标签，将学生数组数据动态渲染为表格行，并设置了表头、边框及样式。所有示例均采用`ref`定义响应式数据，模板中通过插值表达式显示内容，代码简洁，便于初学者快速掌握Vue基础指令和列表循环的实际用法。
该文介绍 Vue 3 中 `toRefs()` 函数的实际用法。示例中先通过 `reactive` 创建包含姓名、年龄、性别的响应式对象 `person`，再用 `toRefs` 将其解构为多个 ref 值，使模板可直接使用且保持响应式。随后设置 4 秒定时器，修改 `name.value`、`age.value`、`gender.value` 为李四、25、女，页面数据随之更新，控制台输出提示。读者可借此理解：`toRefs` 能将响应式对象转换为普通 ref 对象，解构后不丢失响应性，适用于在 `script setup` 中便捷操作响应式数据，并实现延时更新视图的效果。
