Question

我的组件中有一个v-for：

<li v-for="(item, index) in items"></li>

但这也是范围插槽的一部分：

<div slot="modal">
    ....
    <li v-for="(item, index) in items"></li>
    ....

那么，在父级中，如何在插槽中使用我自己的HTML，但仍然使用子组件中的items数据？

Answer 1

您可以使用scoped slots。

首先，在子组件中，通过将数组绑定到items标记，指定插槽应该引用slot道具：

<slot name="modal" :items="items">

然后，在父组件中，您可以使用items指令访问slot-scope数组：

<div slot="modal" slot-scope="props">
  <li v-for="(item, index) in props.items"></li>
</div>

此处，props是一个对象，其所有属性都已绑定到子组件的slot标记。因此props.items引用了子组件中的items数组。

这是一个简单的例子：

Vue.component('child', {
  template: `
    <div>
      <slot name="foo" :items="items"></slot>
    </div>
  `,
  data() {
    return { items: ['a', 'b', 'c'] };
  }
})

new Vue({
	el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <child> 
    <ul slot="foo" slot-scope="props">
      <li v-for="(item, index) in props.items">
        {{ item }}
      </li>
    </ul>
  </child>
</div>

在范围内的广告位中使用数据？

1 个答案: