修改 vuejs 中父组件通过槽添加的子组件数据

Question

我对组件的世界有点陌生，并试图弄清楚父子关系如何在组件中工作。我已经看到了一些组件库的一些示例，其中它们有一些要定义的父子组件，并且它们被用作子组件。比如table和tr：

<my-table>                <!-- Parent -->
    <my-tr>   </my-tr>    <!-- Child  -->
</my-table>

现在，我假设该孩子通过插槽为父母工作。所以父母应该这样定义：

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

现在父元素也可以有多个<my-tr>。插槽应该渲染所有这些。但是，我正在尝试类似的事情，但比这更复杂一些。

我正在尝试使用这种方法创建一个滑块。其中有一个my-slider 组件和my-slider-item 组件用于在my-slider 组件内部定义。然后我想通过修改它的属性来控制父组件槽中定义的子组件的可见性。

它应该是这样的：

<my-slider>
    <my-slider-item>Item 1</my-slider-item>
    <my-slider-item>Item 2</my-slider-item>
    <my-slider-item>Item 3</my-slider-item>
</my-slider>

my-slider 组件

<template>
    <div class="my-slider">
        <slot></slot>
    </div>
</template>

my-slider-item 组件

<template>
    <div class="my-slider__item">
        <slot></slot>
    </div>
</template>

现在我如何知道在父插槽中定义了多少<my-slider-item>，并基于此我想一次控制子 1 的可见性，因为它将作为滑块工作。

我不确定，但我在这里遗漏了一些基本概念，自昨天以来我在查看大量示例后没有得到这些概念。如果有人可以请在这里帮忙吗？非常感谢！

Answer 1

父子关系实际上是通过将子组件导入到父组件中来建立的，并将子组件包含在父组件的'components'选项中。

我使用简单的父子组件定义创建了一个示例场景，以展示标准的关系实现。使用 Vue 2 和 Vue CLI 构建。

MySlider.vue（父级）

<template>
  <div class="my-slider">
    <h4>My Slider</h4>
    <my-slider-item v-for="(item, index) in sliderItems" :key="index" :sliderItem="item" />
  </div>
</template>

<script>
  import MySliderItem from './MySliderItem.vue'

  export default {
    components: {
      MySliderItem
    },
    data() {
      return {
        sliderItems: [
          {
            name: 'Slider Item 1'
          },
          {
            name: 'Slider Item 2'
          },
          {
            name: 'Slider Item 3'
          }
        ]
      }
    }
  }
</script>

MySliderItem.vue（子）

<template>
  <div class="my-slider-item">
    <h5>{{ sliderItem.name }}</h5>
  </div>
</template>

<script>
  export default {
    props: {
      sliderItem: {
        type: Object,
        required: true
      }
    }
  }
</script>