vuejs2 - 如何将道具传递给在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从siteprop 传递到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 渲染。