我想在我的 Vue 项目中将两个组件相互链接。 我为此使用双向绑定，所以我有一个父组件和两个子组件。
概念：
我们在屏幕左侧看到一个旋转木马， 我们在右侧看到一个手风琴.我从数据库文件中用 v-for 构建了旋转木马和手风琴。
当我点击一些手风琴时，它会下降，我需要旋转木马组件的反应，才能准确地滑动到那里，我在手风琴中点击的地方。
喜欢：
旋转木马：香蕉、苹果、房子
手风琴：香蕉，苹果屋
因此，当我单击苹果手风琴按钮时，我需要滑块转到显示苹果的位置，然后反转。
正如我所说，我已经将两个组件相互绑定，所以当我单击其中一个手风琴按钮(如@click="onShowStart(index)")时，我也会在另一个子项中获取该索引，并且它通过滑动或单击动态变化，反之亦然。因此，索引已经链接并且是动态的。
我的问题是我不知道如何触发事件，例如从监视字段中的 vue 实例@sliding启动。所以我在我的组件中观察了"actualPosition"道具，当它发生变化时(例如从 3 到 1)，我想启动一个滑动事件到实际位置的新值。
所以我需要这样的东西：
this.$emit('sliding-start', actualPosition);
我已经在这个问题上坐了好几天了，但我认为我的整个想法都是错误的。但在我相信这一点之前，我先问你。
这是我的父组件代码：
<div class="row">
<carousel :actualPosition="actualPosition" class="col bg-dark" @sendTheCarouselPosition="updateAccordion($event)"></carousel>
<accordion :actualPosition="actualPosition" class="col bg-dark" @sendTheAccordionlPosition="updateCarousel($event)"></accordion>
</div>
<script>
export default {
data() {
return {
actualPosition: null,
}
},
methods:{
updateAccordion: function (updatedAccordion){
this.actualPosition = updatedAccordion;
},
updateCarousel: function(updatedSlider){
this.actualPosition = updatedSlider
}
},
}
</script>
我的手风琴组件：
<template>
<div role="tablist">
<b-card no-body class="mb-1" v-for="(item, index) in dataForProject">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block href="#" v-b-toggle="'accordion-' + index" variant="info" @click="onShowStart(index)" >{{ item.title }}</b-button>
</b-card-header>
<b-collapse :id="'accordion-' + index" visible accordion="my-accordion" role="tabpanel">
<b-card-body>
<div>
<h1>data from Carousel sibling: {{ actualPosition }}</h1>
</div>
<b-card-text>{{ item.content }}</b-card-text>
</b-card-body>
</b-collapse>
</b-card>
</div>
</template>
<script>
import myDataBase from '../data2'
export default {
props:['actualPosition'],
watch:{
actualPosition: function () {
},
},
data() {
return {
dataForProject: myDataBase,
}
},
methods:{
onShowStart: function (accordionIndex) {
this.$emit('sendTheAccordionlPosition', accordionIndex);
},
},
}
</script>
还有我的轮播组件：
<template>
<div>
<p class="mt-4 text-white">
data from Accordion sibling: {{ actualPosition }}
</p>
<b-carousel
id="carousel-1"
:interval="0"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
ref="slider"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<b-carousel-slide v-for="(item, index) in dataForProject" :id="index" >
<img
slot="img"
class="d-block img-fluid w-100"
width="1024"
height="480"
:src="item.image_url"
alt="image slot"
>
</b-carousel-slide>
</b-carousel>
</div>
</template>
<script>
import myDataBase from '../data2'
export default {
props:['actualPosition'],
watch: {
actualPosition: function () {
},
},
data() {
return {
//slide: 0,
dataForProject: myDataBase,
}
},
methods: {
onSlideStart(slide) {
this.$emit('sendTheCarouselPosition', slide);
},
onSlideEnd(slide) {
},
}
}
</script>
我可以通过两种方式完成此操作。
1 -全局EventBus我将创建一个 eventBus 并从任何文件在其上注册事件并在任何地方收听它 -
import { EventBus } from '@/eventBus'
// simply import it to component which need listen the event
//Register Event where you have your methods - like In your COMP_B_TWO
EventBus.$on('changeValue', () => { this.doSomething() })
// Emit event from another component
EventBus.$emit('changeValue')// Like directly from your COMP_A_TWO
要了解如何创建事件总线，请遵循此 - 全局事件总线 Vue
2 - 使用state management-Vuex点击此链接 - Vuex
基本上，它将集中存储应用程序中的所有组件。每当您希望更新状态时，您都会更新到存储。使用该状态的所有其他组件将做出相应的反应
。好吧，所以我的整个概念都是错误的，我错了。
我应该在整个事情中使用 v 模型。仅此而已。
我将 v 模型添加到目标标签中，我的问题解决了。