Vue组件传prop时渲染变量名而非对应字符串值问题排查

你遇到的传值异常核心原因是混淆了Vue模板和React/JSX的属性绑定语法，两种错误写法的解析逻辑如下：

• 写copy={GET_STARTED}时，Vue会把没有加绑定指令的属性判定为静态字符串属性，不会解析大括号内的变量，直接把{GET_STARTED}这段纯文本作为copy的值传给子组件，最终UI就会渲染出这段异常文本。
• 写copy='GET_STARTED'时，同样属于静态属性传值，单引号包裹的内容会被识别为字面量字符串GET_STARTED，不会关联你在script中引入的同名常量，自然拿不到"Get Started"的实际值。

另外你子组件中直接对props对象解构的写法存在响应性丢失隐患：父组件后续更新prop值时，解构出来的copy、url变量不会同步更新，这不属于这次传值失败的核心原因，但不符合Vue开发规范。

Vue模板中传递动态变量、JS表达式作为prop值时，必须使用v-bind指令（简写为英文冒号:）修饰属性，加了指令后属性值中双引号包裹的内容会被当作JS表达式解析，从当前组件作用域读取对应变量值。
父组件中调用GreenBtn的正确代码为：

<GreenBtn :copy="GET_STARTED" url="/sign-up" />

• :copy="GET_STARTED"是动态绑定，会读取你引入的常量GET_STARTED的实际值"Get Started"传给子组件
• url="/sign-up"是固定静态字符串，不需要加绑定指令，直接写属性即可正常传值。

如果需要在子组件中解构props，要使用toRefs包裹props对象保留响应性，修正后的子组件script代码：

<script setup>
import { toRefs } from 'vue'
const props = defineProps(['copy', 'url'])
const { copy, url } = toRefs(props)

const handleGetStartedClick = (msg) => {
  console.log(msg)
  console.log(`Goto url: ${url.value}`) // script中访问ref值需要加.value，模板中不需要
}
</script>

如果prop值是固定不会更新的常量，直接解构也能正常拿到初始值，但不推荐这么写，避免后续迭代出现响应性异常。

内容的提问来源于stack exchange，提问作者Leon Gaban