Vue如何跨两层子组件传递prop？解决插值属性报错问题

嘿，我完全懂你的困惑——不就是想传个字符串id吗，为啥非得加个冒号？别急，我给你把这事掰扯明白：

为啥会触发这个报错？ #

Vue从2.x版本开始就彻底移除了属性内部的{{ }}插值语法，不管你是要传递组件的变量，还是看起来像静态的字符串，只要你想把组件的prop/data绑定到属性上，就必须用v-bind（或者它的简写:）。

你之前写的<btn id="{{ this.myId }}"></btn>，Vue会把整个{{ this.myId }}当成纯字符串处理，根本不会解析成组件的myId prop，同时这种写法已经被官方废弃，所以才会弹出那个错误提示。

具体怎么解决？ #

其实操作很简单，不管你是传变量还是要转成字符串的数值，用v-bind（或简写:）就能搞定，Vue还会自动帮你处理类型转换：

方案1：用v-bind简写传递prop #

直接把id="{{ this.myId }}"改成:id="myId"就行——这里不需要加this.，在Vue模板里访问组件的prop/data可以直接写变量名：

<btn :id="myId"></btn>

这样你的myId（值为"1"）就会被正确传递给btn组件的id prop，而且是字符串类型哦。

方案2：如果要手动传递固定字符串（补充场景） #

要是你有时候想直接传固定的字符串值，也可以用v-bind，把字符串用单引号包起来就行：

<btn :id="'1'"></btn>

不过你这里是要传递comments组件的myId prop，所以方案1完全适配你的需求。

额外小提示：为啥不用this.？ #

在Vue模板的表达式里，上下文默认就是当前组件实例，所以你直接写myId就能访问到这个prop，加this.也不会错，但属于多余操作~

总结一下：Vue现在要求所有动态属性绑定必须用v-bind（或:），哪怕你觉得是“静态”的字符串，只要是来自组件的prop/data，就得遵循这个规则。统一的写法反而能避免很多类型和绑定的混淆哦~

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