Vue组合式API父子组件传值及父组件数据定义问题

DevOps 小满

2026-7-19

Vue组件Props传值与组合式API数据定义问题解决

1. App.vue向`:name`传值的正确方式

你的代码存在两处关键错误：

模板动态绑定语法：<HelloWorld :name=refName/> 缺少引号包裹变量，解析时触发unexpected end of expression错误，应改为 <HelloWorld :name="refName"/>
Ref值修改错误：直接赋值refName = "test"会覆盖Ref对象，组合式API中必须通过.value修改Ref值，即 refName.value = "test"
冗余代码：App作为父组件无需通过defineProps接收name_，直接定义内部数据即可

2. 父组件用组合式API定义数据的正确方式

在<script setup>中，直接使用ref或reactive定义响应式数据即可，无需额外配置。以下是修正后的完整代码：

修正后的App.vue

<template>
  <HelloWorld :name="refName"/>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'

// 用ref定义响应式数据
const refName = ref('初始值')
// 修改Ref值必须通过.value
refName.value = "test"
</script>

修正后的HelloWorld.vue（推荐添加props类型校验）

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

// 定义props并添加类型校验，提升代码健壮性
const props = defineProps({
  name: String,
  address: String,
  phone: String
})

// 解构props，模板中可直接使用name
const { name } = props
</script>