Vue3组件Props传值全部为undefined问题求助

核心原因 #

你调用组件时使用了:title="xgfgdgdgsgdg"，这里的冒号是Vue的v-bind语法，会把xgfgdgdgsgdg当作父组件中的变量来解析，但你并没有在父组件（app.js挂载的根实例）中定义这个变量，导致传递给子组件的prop值为undefined，所以模板无法渲染内容。

两种修复方案 #

方案1：直接传递字符串字面量（移除冒号） #

不需要v-bind时，直接写属性名传递字符串：

<example title="xgfgdgdgsgdg"></example>

方案2：用引号包裹字符串（保留冒号） #

如果必须使用v-bind语法，需要把字符串用单引号/双引号包裹，让Vue解析为字符串字面量：

<example :title="'xgfgdgdgsgdg'"></example>

或者使用模板字符串：

<example :title="`xgfgdgdgsgdg`"></example>

验证效果 #

修改后，子组件中的console.log(props.title)会输出xgfgdgdgsgdg，模板里的{{ title }}也会正常显示内容。

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