javascript - 如何让 parent 知道插槽内的子组件？

Question

我想知道如何让父组件知道插槽内的子组件。

例如，如果我想创建一个 slider 并且我希望具有以下结构:

在我看来:

<vue-slider>
    <vue-slide name="First slide!">First slide content</vue-slide>
    <vue-slide name="Second slide!">Second slide content</vue-slide>
</vue-slider>

VueSlider.vue

<template>
    <div class="slider">
        <ol>
            <li v-for="(slide,index) in slides">{{slide.name}}</li>
        </ol>


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

<script>
    export default {

        data: function(){
          return {
              slides: [],
          }
        }
    }
</script>

VueSlide.vue

<template>
    <div class="slide">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        props: {
            'name': {

            }
        }
    }
</script>

所以我想在父组件上填充幻灯片数组。我正在考虑在安装每张幻灯片时发出一个事件，但后来我在 vue 文档上读到了这个:

You cannot use $on to listen to events emitted by children. You must use v-on >directly in the template, as in the example below.

谢谢!

Answer 1

默认插槽中的所有内容都可以通过组件内部的 $slots.default 获得(命名插槽可以通过 $slots[name] 获得)。因此，如果您想在父组件中填充 slides 数组，您可以检查默认槽的内容并消除不是幻灯片的节点(回车符等空格包含在节点中)。

这是一个例子。

console.clear()

Vue.component("VueSlider", {
  template: `
    <div class="slider">
       <h1>Number of slides: {{slides.length}}</h1>
        <ol>
            <li v-for="(slide,index) in slides">{{slide.name}}</li>
        </ol>
        <slot></slot>
    </div>
  `,
  data: function() {
    return {
      slides: [],
    }
  },
  mounted(){
    for (let node of this.$slots.default){
      // filter out whitespace nodes
      if (node.tag){ 
        // may want to check to add only VueSlide nodes
        this.slides.push(node.componentInstance)
      }
    }
  }
})

Vue.component("VueSlide", {
  template: `
    <div class="slide">
        <slot></slot>
    </div>
  `,
  props: {
    'name': String
  }
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <vue-slider>
    <vue-slide name="First slide!">First slide content</vue-slide>
    <vue-slide name="Second slide!">Second slide content</vue-slide>
  </vue-slider>
</div>

您需要检查 node 对象，以便了解其属性。在这种情况下，我将 componentInstance 插入 slides 数组，因为这是当前组件实例的数据属性所在的位置(因此您可以使用 {{slide.name}} 在父级中。但是，在我这样做的情况下，我通常会将自定义对象推送到仅包含我想要的信息的集合中。像这样:

this.slides.push({name: node.componentInstance.name})