如何使组件道具可用于其开槽元素？

Question

我有这样的结构：

<childs>
    <child>
        <ul>
          <li v-for="item in currentData">@{{ item.name }}</li>
        </ul>
    </child>
</childs>

在child 组件中，我有一个数据属性currentData。

// Child.vue
data: {
    currentData: {}
}

出于某种原因，我从childs 组件（而不是child）为这个currentData 属性赋值。

// Childs.vue
child.currentData = data;

如何使currentData 可用于<child> 的开槽元素：

<ul>
    <li v-for="item in currentData">@{{ item.name }}</li>
</ul>

Child.vue 的模板是这样的：

<template> <div><slot></slot></div> </template>

我尝试过这样的事情：

<template> <div><slot :current-data="currentData"></slot></div> </template>

Answer 1

我相信你需要的是Scoped Slots。

为此，您应该明确地传递（在模板的插槽声明中）您想要提供给<slot>“用户”的道具。

例如假设您想让foo 的插槽用户可以使用foo 属性（假设childData 属性存在于<child> 中）。你会这样做：

<!-- This is <child>'s template -->
<template> <div><slot :foo="childData"></slot></div> </template>

从那时起，任何使用<child> 组件的人都可以通过声明slot-scope 来访问foo 属性：

<child>
  <ul slot-scope="slotProps">
    <li>{{ slotProps.foo }}</li>
  </ul>
</child>

请注意，slot-scope 是在替换 <slot> 所在位置的元素中声明的。

完整演示：

Vue.component('children', {
  template: '#children'
})

Vue.component('child', {
  template: '#child',
  data() {
    return {
      childData: "I am childData"
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <children>
    <child>
      <ul slot-scope="slotProps">
        <li>{{ slotProps.foo }}</li>
        <!-- <li v-for="item in currentData">@{{ item.name }}</li> -->
      </ul>
    </child>
  </children>
</div>

<template id="children">
  <div><slot></slot></div>
</template>
<template id="child">
  <div><slot :foo="childData"></slot></div>
</template>

如果我想在<ul> 元素之外添加另一个元素怎么办？ Vue 会简单地丢弃 slot-scope 之外的任何内容。

这不是因为slot-scope，而是因为<slot>s。

由于child 只有一个<slot>，因此您在<child> 中放置的第一个元素将采用slot。

如果您想让多个元素采用slot，则必须将它们包装起来。例如。在<div>。但是，如果您不希望呈现此包装器元素，请使用<template>。请参阅下面的演示。

Vue.component('children', {
  template: '#children'
})

Vue.component('child', {
  template: '#child',
  data() {
    return {
      childData: "I am childData"
    }
  }
})

new Vue({
  el: '#app'
})

.child { border: 1px solid red }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <children>
    <child>
      <template slot-scope="slotProps">
        <ul>
          <li>{{ slotProps.foo }}</li>
          <!-- <li v-for="item in currentData">@{{ item.name }}</li> -->
        </ul>
        <span>howdy</span>
      </template>
    </child>
  </children>
</div>

<template id="children">
  <div><slot></slot></div>
</template>
<template id="child">
  <div class="child"><slot :foo="childData"></slot></div>
</template>