有没有办法通过在 Vue 实例中对其进行硬编码来 "emit" 内置事件？

Question

我想 link 我的 Vue 项目中的两个组件。我为此使用双向绑定，所以我有一个父组件和两个子组件。

概念：

我们在屏幕左侧看到旋转木马，在右侧看到手风琴。我从数据库文件中用 v-for 构建了旋转木马和手风琴。

当我点击一些手风琴时，它会掉下来，我需要轮播组件的反应，才能准确地滑到我点击手风琴的地方。

赞：

旋转木马：香蕉、苹果、房子

手风琴：香蕉、苹果屋

所以当我点击苹果手风琴按钮时，我需要滑块移动到显示苹果的位置，然后反转。

正如我所说，我已经将两个组件相互绑定，所以当我单击其中一个手风琴按钮（如@click="onShowStart(index)"）时，我也在另一个子组件中获得了该索引，并且它通过滑动或单击动态变化，反之亦然。所以索引已经 linked 并且是动态的。

我的问题是我不知道如何触发一个事件，比如从监视字段中的 vue 实例的@sliding-start。所以我在我的组件中观察 "actualPosition" 道具，当它发生变化时（例如从 3 到 1），我想启动一个滑动事件到 actualPosition 的新值。

所以我需要这样的东西：

 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>

我的 Carousel 组件：

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

Answer 1

我可以通过两种方式完成。

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

要了解如何创建 eventBus，请遵循此 - Global Event Bus Vue

2 - 使用 state management - Vuex 遵循此 link - Vuex

基本上，它将集中存储应用程序中的所有组件。每当您希望更新状态时，您都会更新到商店。使用该状态的所有其他组件都会做出相应的反应

Answer 2

好吧，所以我的整个概念是错误的，我错了。

我应该用 v-model 来完成这一切。仅此而已。

我在目标标签中添加了v-model，我的问题就解决了。

有没有办法通过在 Vue 实例中对其进行硬编码来 "emit" 内置事件？

Is there a way, to "emit" a built in event, by hard coding it in Vue instance?

accordion

carousel

vue.js

vue-cli

bootstrap-vue

这是我的父组件代码：

我的手风琴组件：

我的 Carousel 组件：