本文介绍一个 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"`将完整对象作为单个props传递，并对比特点与适用场景。还涉及响应式数据传递（`reactive`/`ref`）、应用场景（表单、列表、条件渲染）、注意事项（对象引用传递、props验证）。通过示例说明动态绑定实现灵活的父子组件通信，强调单向数据流，帮助读者根据场景选择合适方式。
Vue 中父组件通过 props 向子组件传递数据，实现组件间通信与数据共享。静态绑定时属性值默认为字符串，通过组件标签属性传参；子组件需用 defineProps 声明接收，否则数据被忽略。props 遵循单向数据流，子组件不可直接修改，需通过事件通知父组件；同时支持类型验证、必填、默认值及自定义校验。命名上子组件声明用 camelCase，模板中使用推荐 kebab-case。动态绑定可用 v-bind（:num="值"）传递变量或表达式，且能保留非字符串类型。Props 为响应式，父组件数据变化会自动同步。该机制保证了数据流可预测性和组件复用性。
本文针对 Vue 项目中组件样式全局生效导致的冲突问题，介绍 Scoped CSS 解决方案。通过为 `<style>` 添加 `scoped` 属性，Vue 自动为组件元素添加唯一 `data-v-xxx` 属性，使 CSS 选择器限定在当前组件内，实现样式隔离。文中给出父组件、全局组件、局部组件的修改示例，并总结特性：父组件 scoped 样式不渗透子组件内部，但子组件根元素受双方影响；若需影响子组件内部，可使用 `::v-deep`、`/deep/` 或 `:deep()` 深度选择器，或改用 CSS Modules。同时提醒避免过度使用 scoped、注意少量运行时开销、覆盖第三方库样式时需用深度选择器、scoped 优先级遵循 CSS 规则。最终三个组件样式相互隔离，边框、背景及布局均按预期显示。
案例概述 本案例演示了 Vue 3 中组件的两种注册方式：全局注册和局部注册，以及如何在父组件中引用这些组件。 组件结构 src/components/2026516/ ├── 2.vue # 父组件（主组件） ├── GlobalComponent.vue # 全局组件
本文介绍了一个基于 Vue 3 和 Bootstrap 5 开发“学习计划表”应用的完整案例。项目通过 VSCode 搭建，引入 Bootstrap CDN 样式，并实现以下核心功能：使用 `v-for` 动态渲染表格数据，展示序号、科目、内容、地点、完成状态和操作列；通过 `v-model` 绑定完成状态开关，并用动态 `id` 与 `label` 关联解决点击文字无法切换状态的问题；删除功能限定只有“已完成”的计划才能删除，否则弹出提示；新增计划通过表单提交实现，包含必填校验、`v-model.trim` 去除首尾空格，以及下拉框动态选项。案例覆盖 Vue 常用指令和事件绑定、修饰符等关键知识点，适合练习组件内数据管理、条件渲染和表单交互，最终提供可直接复用的完整代码。
Main根文件 import { createApp } from 'vue' //创建应用 import App from './App.vue' //引入app组件，根组件 createApp(App).mount('#app') //createApp创建应用，将app组件挂载到index.
使用Vite创建项目 https://cn.vuejs.org/guide/quick-start.html 创建命令 npm create vue@latest 常见问题 首次打开项目会有报错，是因为项目中没有依赖 npm i //安装所有依赖
下拉菜单 <template> <div> <select v-model="xz"> <option value="">请选择</option> <option v-for="flurt in list" :key="flur
toRefs( )函数用法，实现个人信息（姓名、年龄、性别）在4秒后改变。 <template> <div class="info"> <h2>个人信息</h2> <p>姓名：{{ name }}</p>
