Vue3中动态Prop组件失效：图片Prop传递异常问题排查

核心错误 #

你在父组件传递avatar属性时，没有使用Vue的响应式属性绑定语法，导致子组件接收到的是静态字符串"avatar"，而非父组件data中的响应式变量。

具体修改 #

将父组件中的代码：

<Card avatar="avatar" />

修改为：

<Card :avatar="avatar" />

（:avatar是v-bind:avatar的简写，作用是把父组件data里的响应式变量avatar绑定到子组件的同名props上）

原理说明 #

• 写avatar="avatar"时，Vue会把右侧内容当作普通字符串处理，子组件props只会收到固定的字符串值，不会随父组件变量更新而变化。
• 使用:avatar="avatar"后，Vue会建立响应式绑定，父组件data中的avatar更新时，子组件的props会自动同步新值，图片的src也会随之更新。

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