Shopware 6 Vue EventBus or a global Variable?

Question

I am currently programming a plugin in Shopware 6 and am in the process of creating the area in the admin. Now I have made a component in Vue / Shopware 6, which calls itself several times. The problem is that I need data from the child in the main component. But since the component keeps calling itself, the value ends up in the parent component, not the main component.

The question is: is there a way to use something like the event bus (I had already tried it after the Vue description and didn't work) from Vue or possibly set a global variable? Unfortunately I can't find anything about it.

That is the component im talking about.

Thanks for Help <3

{% block partscout_categorie_tree  %}
    <div>
        <div @click="toggle" class="partscout-categorie-tree-cell">
            <div class="first-cell">
                <span :class="{cellbold: isFolder}">{{ item.snippet ? item.snippet : 'Kategorien'}}</span>

                <sw-icon v-if="isFolder"
                         :name="isOpen ? 'regular-chevron-up-xxs' : 'regular-chevron-down-xxs'"
                         size="1.2em">
                </sw-icon>
            </div>

            <div class="second-cell">
                <span>
                    <sw-icon :name="idIcon === item.folderId ? 'regular-checkmark-xs' : 'regular-plus-circle'"
                             color="green"
                             small
                             @click.stop="transferCatId(item.folderId)">
                    </sw-icon>
                </span>
            </div>
        </div>

        <ul v-show="isOpen" v-if="isFolder">
            <partscout-categorie-tree
                    :class="{'partscout-categorie-tree-list' : isFolder}"
                    v-for="(child, index) in item.subFolder"
                    @transferCatId="transferCatId()"
                    :item="child">
            </partscout-categorie-tree>
        </ul>
    </div>
{% endblock %}

Answer 1

You could provide a property or method in the parent. This can then be injected within the child components, not only direct descendants but all descendants of the parent component.

As a general example:

Shopware.Component.register('parent-component', {
    template,

    provide() {
        return {
            addId: this.addId,
        };
    },

    data() {
        return {
            ids: [],
        };
    },

    methods: {
        addId(id) {
            this.ids.push(id);
        },
    }
});

Shopware.Component.register('child-component', {
    template,

    inject: [
        'addId',
    ],

    methods: {
        onAddId(id) {
            this.addId(id);
        },
    }
});