如何将道具传递给在 VueJS 中的 v-for 中呈现的子组件

Question

我有以下 Vue 组件

export default {
    components: {
      DimensionedImage
    },
    props: [
      'site'
    ]
  }

其中 site 是一个对象：

{
  title: '',
  imageUrls: [],
  hostname: ''
}

该组件的渲染函数如下所示：

<article>
  <header>
    <h1>{{this.site.title}}</h1>
  </header>
  <div class="images-container">
    <template v-for="imageUrl in this.site.imageUrls">
      <DimensionedImage :key="imageUrl" :url="imageUrl" :hostname="this.site.hostname"/>
    </template>
  </div>
</article>

如您所见，我想将 hostname 从 site 属性传递到 DimensionedImage 组件中，但 Vue 一直告诉我 this 未定义。

谁能告诉我这里的幕后发生了什么，至于为什么 this 失去了上下文？然后我怎样才能真正修复代码，以便我可以将 hostname 从 this.site 传递到子组件中？

Answer 1

在模板中呈现数据变量时，您不需要在访问属性.

时使用 this 的实例

<article>
  <header>
    <h1>{{site.title}}</h1>
  </header>
  <div class="images-container">
    <template v-for="imageUrl in site.imageUrls">
      <DimensionedImage :key="imageUrl" :url="imageUrl" :hostname="site.hostname"/>
    </template>
  </div>
</article>

可以通过vue渲染here。

如何将道具传递给在 VueJS 中的 v-for 中呈现的子组件

How to pass props to a child component that is rendered in a v-for in VueJS

vuejs2

v-for

vue-props