javascript - Vue.js 组件与子组件的通信

Question

我想在Vue中制作一个 slider 我有 2 个组件“Slider”和“SliderItem” 一个“Slider”可以有多个“SliderItem” 我如何在这两个组件之间进行内部通信
用法示例

<Slider>
    <SliderItem>
        <h1>Slide 1</h1>
    </SliderItem>
    <SliderItem>
        <h1>Slide 2</h1>
    </SliderItem>
</Slider>

slider 组件

<template>

    <div>
        <slot :i="index"></slot>
    </div>
</template>

<script>
export default {
    data() {
        return { index : 0 };
    }
};
</script>

如何将当前索引传递给子项 (SliderItem)
所以我可以根据从父级( slider )传递的索引显示/隐藏它们
同样的，我怎样才能实现 child 与家长的沟通
例如在 React 中可以这样做

const childrenWithProps = React.Children.map(this.props.children,
 (child) => React.cloneElement(child, {
   index: this.state.index
 })
);

我想在 Vue 中做同样的事情

Answer 1

使用props将数据传递给子级，以及 events将数据从子级传递回父级。 child 与 child 的沟通是通过 parent 完成的。

请仔细研究文档，因为您会在那里找到您需要的大部分内容。祝你好运!