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的{{1}}传递到子组件中？

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中呈现的子组件

1 个答案: