Javascript Vue.js组件与子组件的通信

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

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

我想在Vue中执行相同的操作，使用Vue将数据向下传递给子级，并将数据从子级传递回父级。孩子之间的沟通是通过家长完成的

请仔细研究这些文件，因为你会在那里找到你需要的大部分东西。祝你好运

用于将数据向下传递给子级，并将数据从子级传递回父级。孩子之间的沟通是通过家长完成的

---

请仔细研究这些文件，因为你会在那里找到你需要的大部分东西。祝你好运

另一个答案已经说过，你应该使用道具。我认为您过于关注如何使用vue以反应方式实施解决方案。您可以使用React或Vue来实现，无需混合它们。HTML模板代码是由Vue解析的标记，它不是呈现DOM的一部分，而是经过处理的

---

要重新迭代，HTML将转换为JavaScript，因此在DOM中不会看到您的道具。

正如另一个答案所说，您应该使用道具。我认为您过于关注如何使用vue以反应方式实施解决方案。您可以使用React或Vue来实现，无需混合它们。HTML模板代码是由Vue解析的标记，它不是呈现DOM的一部分，而是经过处理的

---

要重新迭代，HTML将转换为JavaScript，因此您的道具将不会在DOM中显示。

我认为这将有助于您，首先将内部组件包装在定义了作用域的模板中，并将内部组件作为道具提供索引

<Slider>
   <template scope="sliderItemScope">
     <SliderItem :parent-index="sliderItemScope.i">
        <h1>Slide 1</h1>
     </SliderItem>
     <SliderItem :parent-index="sliderItemScope.i">
        <h1>Slide 2</h1>
     </SliderItem>
   </template>
</Slider>

---

我认为这将帮助您，首先将您的内部组件包装在一个定义了范围的模板中，并将内部组件作为prop提供索引

<Slider>
   <template scope="sliderItemScope">
     <SliderItem :parent-index="sliderItemScope.i">
        <h1>Slide 1</h1>
     </SliderItem>
     <SliderItem :parent-index="sliderItemScope.i">
        <h1>Slide 2</h1>
     </SliderItem>
   </template>
</Slider>

---

Kumar_14的答案基本上是正确的 但是他编辑了我不想做的HTML，以使插件的使用尽可能简单和小

但是我发现了一种更简单的方法，使用这个。从子对象中获取$parent来访问父对象的数据

HTML

幻灯片1
幻灯片2
幻灯片3
幻灯片4

JavaScript

var Slider = Vue.component("slider", {
  template: "<div><button @click=\"prev\">Prev</button><slot></slot><button @click=\"next\">Next</button></div>",
  data() {
    return { index: 1 };
  },
  methods: {
    next() {
      this.index = this.index === this.childrenLength ? 1 : this.index + 1;
    },
    prev() {
      this.index = this.index === 1 ? this.childrenLength : this.index - 1;
    }
  },
  computed: {
    childrenLength() {
      return this.$children.length;
    }
  }
});

var SliderItem = Vue.component("slider-item", {
  template: "<div v-if=\"$vnode.data.key === $parent.index\"><slot></slot></div>"
});

new Vue({
  el : "#root",
  components: {
    "slider": Slider,
    "slider-item": SliderItem
  }
});

var Slider=Vue.component（“Slider”{
模板：“PrevNext”，
数据（）{
返回{索引：1}；
},
方法：{
下一个（）{
this.index=this.index==this.childrenLength？1:this.index+1；
},
prev（）{
this.index=this.index==1？this.childrenLength:this.index-1；
}
},
计算：{
儿童长度（）{
返回此。$children.length；
}
}
});
var SliderItem=Vue.component（“滑块项”{
模板：“”
});
新Vue({
el:“根”，
组成部分：{
“滑块”：滑块，
“滑块项”：滑块项
}
});

---

Kumar_14的答案基本上是正确的 但是他编辑了我不想做的HTML，以使插件的使用尽可能简单和小

但是我发现了一种更简单的方法，使用这个。从子对象中获取$parent来访问父对象的数据

HTML

幻灯片1
幻灯片2
幻灯片3
幻灯片4

JavaScript

var Slider = Vue.component("slider", {
  template: "<div><button @click=\"prev\">Prev</button><slot></slot><button @click=\"next\">Next</button></div>",
  data() {
    return { index: 1 };
  },
  methods: {
    next() {
      this.index = this.index === this.childrenLength ? 1 : this.index + 1;
    },
    prev() {
      this.index = this.index === 1 ? this.childrenLength : this.index - 1;
    }
  },
  computed: {
    childrenLength() {
      return this.$children.length;
    }
  }
});

var SliderItem = Vue.component("slider-item", {
  template: "<div v-if=\"$vnode.data.key === $parent.index\"><slot></slot></div>"
});

new Vue({
  el : "#root",
  components: {
    "slider": Slider,
    "slider-item": SliderItem
  }
});

var Slider=Vue.component（“Slider”{
模板：“PrevNext”，
数据（）{
返回{索引：1}；
},
方法：{
下一个（）{
this.index=this.index==this.childrenLength？1:this.index+1；
},
prev（）{
this.index=this.index==1？this.childrenLength:this.index-1；
}
},
计算：{
儿童长度（）{
返回此。$children.length；
}
}
});
var SliderItem=Vue.component（“滑块项”{
模板：“”
});
新Vue({
el:“根”，
组成部分：{
“滑块”：滑块，
“滑块项”：滑块项
}
});

---

我已经知道基本的沟通是如何运作的，包括事件总线。我的问题是如何在内部实现组件到子组件的通信。上面的示例代码。我不明白你说的内部是什么意思，你能澄清一下吗？例如，在Slider组件中，我如何将（索引）传递给它的子元素（SliderItem）s。我的内部意思是，我不想改变HTML代码，我只想在（Slider）和（SliderItem）之间进行通信，而不是使用道具/事件、事件总线或vuex，我真的不知道。我仍然不明白你是如何得到这样一个场景的：传递道具/事件不是一个解决方案，因为它是组件间通信的一个主要部分。我已经知道基本通信是如何使事件向上和道具向下的，包括事件总线。我的问题是如何在内部实现组件到子组件的通信。上面的示例代码。我不明白你说的内部是什么意思，你能澄清一下吗？例如，在Slider组件中，我如何将（索引）传递给它的子元素（SliderItem）s。我的内部意思是，我不想改变HTML代码，我只想在（Slider）和（SliderItem）之间进行通信，而不是使用道具/事件、事件总线或vuex，我真的不知道。我仍然不明白您是如何得到这样一个场景的：传递道具/事件不是一个解决方案，因为它是组件间通信的主要内容。

props:['parentIndex']

<div id="root">
  <slider>
    <slider-item :key="1">
      <h1>Slide 1</h1>
    </slider-item>
    <slider-item :key="2">
      <h1>Slide 2</h1>
    </slider-item>
    <slider-item :key="3">
      <h1>Slide 3</h1>
    </slider-item>
    <slider-item :key="4">
      <h1>Slide 4</h1>
    </slider-item>
  </slider>
</div>

var Slider = Vue.component("slider", {
  template: "<div><button @click=\"prev\">Prev</button><slot></slot><button @click=\"next\">Next</button></div>",
  data() {
    return { index: 1 };
  },
  methods: {
    next() {
      this.index = this.index === this.childrenLength ? 1 : this.index + 1;
    },
    prev() {
      this.index = this.index === 1 ? this.childrenLength : this.index - 1;
    }
  },
  computed: {
    childrenLength() {
      return this.$children.length;
    }
  }
});

var SliderItem = Vue.component("slider-item", {
  template: "<div v-if=\"$vnode.data.key === $parent.index\"><slot></slot></div>"
});

new Vue({
  el : "#root",
  components: {
    "slider": Slider,
    "slider-item": SliderItem
  }
});