Vue.js动态组件模板插值及作用域匹配问题

我之前也踩过这个坑，刚好能帮到你！

问题场景 #

你想要实现一个可以基于给定模板单独渲染列表项的动态组件，写出了类似这样的代码：

<dynamicComponent v-for="item in listItems" v-bind:input="item" v-bind:is="{template:'<p>{{input.name}}</p>'}"></dynamicComponent>

但执行失败了，原因是Vue会在父作用域而非动态组件自身的作用域中对模板进行插值，而父作用域里并没有input这个变量。

问题根源 #

你之前对v-bind:is的工作原理存在误解：它的作用不是修改已引用的组件，而是用来内联绑定/创建匿名组件的。如果不给这个匿名组件声明对应的props，它就无法获取你传递的input属性，只能去父作用域查找，自然就会报错。

正确解决方案 #

只需要给匿名组件的配置对象加上props声明，让它把input作为自己的属性，这样模板就能引用组件作用域内的变量了。正确代码如下：

<component v-for="item in listItems" v-bind:input="item" v-bind:is="{template:'<p>{{input.name}}</p>', props:['input']}"></component>

这里的核心是props: ['input']，它告诉Vue这个动态创建的匿名组件接受input作为props，模板里的{{input.name}}就会去组件自身的作用域读取属性，而不是父作用域，这样就能正常渲染每个列表项的内容了。

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