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

Posted 2023-02-23

【中文标题】修改 vuejs 中父组件通过槽添加的子组件数据

【英文标题】：Modify child component data added via slots from parent component in vuejs

【发布时间】：2021-07-05 01:00:44

【问题描述】：

我对组件的世界有点陌生，并试图弄清楚父子关系如何在组件中工作。我已经看到了一些组件库的一些示例，其中它们有一些要定义的父子组件，并且它们被用作子组件。比如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 的可见性，因为它将作为滑块工作。

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

【参考方案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>

【讨论】：

好的，明白了。现在如何访问通过父组件中的插槽添加的滑块项并对其进行操作？

您问题的第一行说您正在尝试弄清楚父/子关系在组件中的工作方式。这就是我的例子所展示的。根据您的示例，我不确定您为什么仍然认为需要使用插槽。解释会有所帮助。

感谢蒂姆的回复。当我尝试制作一个组件时，我可以在我网站的多个位置使用它。所以我会在多个页面上使用my-slider 和my-slider-item 在不同的页面上创建不同的滑块。因此，在这些页面上，我应该能够像这样使用我的组件：<my-slider> <my-slider-item> 1 </my-slider-item> <my-slider-item> 2 </my-slider-item> </my-slider>，而在其他地方，my-slider-item> 中的数据在不同的页面上会有所不同。

在我的示例中，您看到我通过 props 将数据从 MySlider 传递到 MySliderItem，然后在 MySliderItem 的模板中显示数据，类似于显示数据的方式（1、2 等）。 ) 通过插槽。在这一点上，我建议您对插槽、道具和 Vue 有更多的了解，然后再决定要做什么。组件的主要优点之一是它们可以根据需要在尽可能多的“页面”上多次使用。并且每次可以通过props传递具体的数据。