vue 3 sfc中引入子组件并传值只需两步：导入+使用+绑定。在父组件用import引入子组件并在中声明数据，模板中用:绑定props传值；子组件用defineprops接收并校验props。

在 Vue 3 单文件组件（SFC）中引入子组件并传值，核心就两步：**导入 + 使用 + 绑定**。不需要额外配置，只要路径正确、语法规范，就能立刻生效。

1. 在父组件中导入并注册子组件

使用 import 语句引入子组件，然后在 <script setup></script> 中直接可用（Vue 3 的 `<script setup>` 会自动注册）：</script>

• 确保子组件路径准确（如 ./components/Child.vue）
• 推荐用 PascalCase 命名组件变量（如 Child），便于模板中识别

示例（Parent.vue）：

<script setup><br> import Child from './components/Child.vue'<br> const msg = '来自父组件的消息'<br> const userList = [{ id: 1, name: '小明' }, { id: 2, name: '小红' }] <br> </script>

2. 在模板中使用子组件并传值（props）

通过属性绑定（: 或 v-bind:）把数据传给子组件。支持字符串、响应式 ref、对象、数组等任意类型：

• :msg="msg" → 传递响应式数据（推荐）
• msg="静态文本" → 传递字面量字符串（不带冒号）
• :user="userList[0]" → 传递对象或数组元素

示例（Parent.vue 模板部分）：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

3. 子组件接收并使用 props

子组件用 defineProps 声明接收哪些 prop，并可设置类型、默认值和是否必填：

• 写法一（简单数组）：defineProps(['message', 'users'])
• 写法二（带校验）：defineProps({ message: String, users: { type: Array, default: () => [] } })
• 模板中直接写 {{ message }}，脚本中用 props.message

示例（Child.vue）：

<script setup><br> const props = defineProps({<br> message: String,<br> users: { type: Array, default: () => [] }<br> })<br> </script>

4. 注意事项（避坑重点）

这些细节容易出错，但改了立马好用：

• 子组件不能直接修改 props —— 修改会报 warning，需通过 emit 通知父组件更新
• 传对象或数组时，用 : 绑定；传纯字符串常量，不加冒号是安全的（但加了更统一）
• 路径错误常见于大小写或扩展名（如写成 child.vue 而不是 Child.vue，Windows 可能不报错，Linux/macOS 会失败）
• 如果子组件没渲染，先检查控制台是否有 “Failed to resolve component” 报错

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！