Question

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

第一个组件

<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>

第二部分-我需要将索引放入：

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

<template>
  <div class="main__bottom-articles">
    <article class="articles__view">
      <div class="articles__view-top">
        <button @click="onCloseClick">-</button>
        <h1>{{articles[1].title}}</h1>
        <p>{{articles[1].desc}}</p>
      </div>
      <div class="articles__view-bottom">
        <img :src="articles[1].img" width="340px" height="auto" />
      </div>
    </article>
  </div>
</template>

Answer 1

将数据传递给子组件的详细记录在这里：https://vuejs.org/v2/guide/components.html

总结：

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

在父组件中，该组件所需的全部是：

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

在componentx和component2中：

props: ['index'],

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

1 个答案: