VueJS 2：直接子组件的捕获事件

Question

I'm currently trying to get a simple Tabs/Tab component up and running. It seems like something in the event handling mechanism has changed, therefore I can't get it to work.

Current implementation:

Tabs.vue

<template>
    <div class="tabbed-pane">
        <ul class="tab-list">
            <li class="tab" v-for="tab in tabs" @click="activateTab(tab)">{{ tab.header }}</li>
        </ul>
        <slot></slot>
    </div>
</template>
<script>
    import hub from '../eventhub';
    export default {
        props: [],
        data() {
            return  {
                tabs: []
            }
        },
        created() {
            this.$on('tabcreated', this.registerTab)
        },
        methods: {
            registerTab(tab) {
                this.tabs.push(tab);
            },
            activateTab(tab) {

            }
        }
    }
</script>

Tab.vue

<template>
    <div class="tab-pane" v-show="active">
        <slot></slot>
    </div>
</template>
<script>
    import hub from '../eventhub';
    export default {
        props: {
            'header': String
        },
        data() {
            return {
                active: false
            }
        },
        mounted() {
            this.$emit('tabcreated', this);
        }
    }
</script>

eventhub.js

import Vue from 'vue';

export default new Vue();

View

<tabs>
    <tab header="Test">
        First Tab
    </tab>
    <tab header="Test2">
        Second Tab
    </tab>
    <tab header="Test3">
        Third Tab
    </tab>
</tabs>

I've tried the following things:

• use a Timeout for the $emit to test if it's a timing issue (it is not)
• use @tabcreated in the root element of the Tabs components
  template

It works if...

• ... I use the suggested "eventhub" feature (replacing this.$on and this.$emit with hub.$on and hub.$emit )

but this is not suitable for me, as I want to use the Tabs component multiple times on the same page, and doing it with the "eventhub" feature wouldn't allow that.

• ... I use this.$parent.$emit

but this just feels weird and wrong.

The documentation states that it IS possible to listen for events triggered by $emit on direct child components https://v2.vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced

Does anyone have an Idea?

Answer 1

You're right, in vue 2, there is no more $dispatch. $emit could work for a single component but it will be scoped to himself ( this ). The recommended solution is to use a global event manager, the eventhub .

the eventhub can be stored in the window object to be used anywhere without import, I like to declare in my main.js file like this:

window.bus = new Vue()

and then in whatever component:

bus.$emit(...)
bus.$on(...)

It works just the same as this.$root.$emit / this.$root.$on . You said it works when you call this.$parent.$emit , but this code, simulate a scoped emit in the parent component but fired from the child, not good.

What I understand in your code is that you want to have an array of created tabs, but to do what with them ?

Instead of storing the tab instance in the parent and then activate from the parent, you should think about a more functional way. The activateTab method should be declared on the tab component and manage the instanciation through the data , something like:

Tabs.vue

<template>
    <div class="tabbed-pane">
        <ul class="tab-list">
            <tab v-for="tab in tabs" :header="tab.header"></tab>
        </ul>
    </div>
</template>
<script>
    import hub from '../eventhub';
    import Tab from 'path/to/Tab.vue';
    export default {
        components: [Tab],
        props: [],
        data() {
            return  {
                tabs: ['First Tab', 'Second Tab', 'Third Tab']
            }
        }
    }
</script>

Tab.vue

<template>
    <div class="tab tab-pane" @click:activeTab()>
        <span v-show="active">Activated</span>
        <span>{{ header }}</span>
    </div>
</template>
<script>
    import hub from '../eventhub';
    export default {
        props: {
            'header': String
        },
        data() {
            return {
                active: false
            }
        },
        methods: {
            activeTab () {
               this.active = true
            }
        }
    }
</script>

This way, your Tab is more independant. For parent/child communication keep this in mind :

• parent to child > via props
• child to parent > via $emit (global bus)

If you need a more complexe state management you definitely should take a look at vuex .

---

Edit

Tabs.vue

<template>
    <div class="tabbed-pane">
        <ul class="tab-list">
            <tab v-for="tabData in tabs" :custom="tabData"></tab>
        </ul>
    </div>
</template>
<script>
    import Tab from 'path/to/Tab.vue';
    export default {
        components: [Tab],
        props: [],
        data() {
            return  {
                tabs: [
                  {foo: "foo 1"},
                  {foo: "foo 2"}
                  {foo: "foo 3"}
                ]
            }
        }
    }
</script>

Tab.vue

<template>
    <div class="tab tab-pane" @click:activeTab()>
        <span v-show="active">Activated</span>
        <span>{{ custom.foo }}</span>
    </div>
</template>
<script>

    export default {
        props: ['custom'],
        data() {
            return {
                active: false
            }
        },
        methods: {
            activeTab () {
               this.active = true
            }
        }
    }
</script>

Answer 2

This is what I don't like about VueJS (2), there is no convenient way of catching events emitted from child components to the parent component.

Anyways an alternative to this is if you do not want to use the eventhub approach, specially if you are only going to have an event communication between related components ( child and parent ) and not with non-related components, then you can do these steps.

1. reference your parent vue component on its data property (very important, you can't just pass this to the child component)
2. pass that parent vue component reference as an attribute to the child component ( make sure to bind it)
3. trigger the appropriate event of the parent component inside the child component whenever a desired event is emitted

Pseudo code

// Parent vue component
Vue.component( 'parent_component' , {

   // various codes here ...

   data : {
      parent_component_ref : this // reference to the parent component
   },

   methods : {

      custom_event_cb : function() {
         // custom method to execute when child component emits 'custom_event'
      }

   }

   // various codes here ...

} );

// Parent component template
<div id="parent_component">
   <child_component :parent_component_ref="parent_component_ref"></child_component>
</div>

// Child component
Vue.component( 'child_component' , {

   // various codes here ...

   props : [ 'parent_component_ref' ],

   mounted : function() {

      this.$on( 'custom_event' , this.parent_component_ref.custom_event_cb );


      this.$emit( 'custom_event' );

   },

   // You can also, of course, emit the event on events inside the child component, ex. button click, etc..

} );

Hope this helps anyone.

Answer 3

Use v-on="$listeners" , which is available since Vue v2.4.0 . You can then subscribe to any event you want on the parent, see fiddle .

Credit to BogdanL from Vue Support @ Discord.