主页 / 问题 / 1239174
Accepted
midnightelf18
Asked:2022-02-03 01:13:59 +0000 UTC2022-02-03 01:13:59 +0000 UTC

如何从子级向父级发出多个事件？

  • 772

Menu.vue
有这么一个组件Menu.vue就是子组件

<aside class="aside">
        <img src="@/assets/logo.svg" alt="expocar" class="aside__logo" @click="hideAllLayouts">
        <div class="aside-links">
            <div class="aside-links__link" data-layout-id="features" @click="toggleLayout($event)">Особенности</div>
            <div class="aside-links__link" data-layout-id="advantages" @click="toggleLayout($event)">Преимущества</div>
            <div class="aside-links__link" data-layout-id="feedback" @click="toggleLayout($event)">Связаться с нами</div>
            <div class="aside-links__shit"></div>
        </div>
        <div class="placeholder"></div>
    </aside>

export default {
    name: 'aside',
    methods: {
        toggleLayout(event) {
            this.$emit('toggle-layout', event.target.dataset.layoutId);
        },
        hideAllLayouts() {
            this.$emit('hide-all-layouts');
        }
    }
}

可以看出，有两种方法发出两个事件toggle-layout和hide-all-layouts. 这些方法在点击相应元素时被调用（点击.aside__logo事件触发hide-all-layouts，点击.features .advantages .feedback事件触发toggle-layout）


App.vue
和组件App.vue是父级Menu.vue

<Menu id="menu" @toggle-layout="toggleLayout" @hide-all-layouts="hideAllLayouts" />

所以我试图拿起这两个事件。他失败了。谷歌搜索，还不够

如何将两个事件传递给父级？

vue.js

1 个回答

  1. Best Answer

    尝试创建一个全局事件

    // main.js
import Vue from 'vue';
window.events = new Vue();

    进一步已经在子组件中

    // component.vue
events.$emit('event1',{status: true})

    并接受父母的答案

    // app.vue
events.$on('event1', (e) => { 
  // условия и тд   
})
    • 1

相关问题