如何在父组件的插槽中使用v-for变量？

Question

当我尝试使用slot中v-for中Vue.js中的变量时，如何解决此错误？

  

属性或方法“ slide”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的

这是我使用组件的方式：

<Slides v-model="slides">
  <AnotherComponent v-model="slide.someproperty" />

在Slides组件中，我有v-for：

<div v-for="(slide, index) in value" :key="slide.id">
        <comp1 v-model="slide.prop1"></dropper>
        <slot></slot>
</div>

Answer 1

这正是scoped slots的目的。

例如，在您的Slides模板中

<slot :slide="slide"></slot>

在父级中...

<Slides v-model="slides">
  <AnotherComponent slot-scope="{ slide }" v-model="slide.someproperty"/>

---

注意：如果使用Vue <2.5，则只能在slot-scope元素上使用<template>。