Javascript 如何将数据从component1内部的方法传递到component2

我有两个组件，一个控制台记录了carousel的索引，我需要将这些索引传递给第二个组件

第一个组件

<template>
  <div class="container container--white">
    <Header />
    <carousel-3d
      @after-slide-change="onAfterSlideChange"
      :width="250"
      :height="300"
      class="main__carousel"
    >
      <slide v-for="(img, i) in images" :key="i" :index="i">
        <img :src="img.src" />
      </slide>
    </carousel-3d>
    <CircleBottom v-bind:images="images" />
  </div>
</template>

export default {
.
.
.
  methods: {
    onAfterSlideChange(index) {
      // eslint-disable-next-line no-console
      console.log(index);
    }
  }
};
</script>

导出默认值{
.
.
.
方法：{
onAfterSlideChange（索引）{
//eslint禁用下一行无控制台
控制台日志（索引）；
}
}
};

第二个组件-我需要将索引放入：

：src=“articles[{index}}].img”

-
{{文章[1]。标题}
{{articles[1].desc}

将数据传递给子组件的详细文档如下：

总之：

<parent>
  <componentx :index="index">
    <component2 :index="index" />
  </componentx>
</parent>

在componentx和component2中：

props: ['index'],

---

这两个组件之间的关系是什么？第二个组件是第一个组件的子组件？不，第一个父组件是组件1，组件1中的组件1是组件X，组件X中的组件2，您是否使用Vuex或其他状态管理系统？不幸的是，不是。@mckvak您不能将索引作为道具传递给组件X，然后再传递给组件2？

data: {
  index: 0
},
methods: {
   onAfterSlideChange(index) {
       this.index = index;
   }
}

props: ['index'],