How to use SocketIO event at different Vue components same time

1
votes

I have 3 Components. App.vue, Header.vue and Example.vue

App.vue is my Parent component. Header.vue and Example.vue is my child components.

My Header.vue created() method : 

created()
{
   socket.on('notification', data => {
     console.log('Header Page');
   });
}

My Example.vue created() method : 

created()
{
   socket.on('notification', data => {
     console.log('Example Page');
   });
}

When page rendered, i see only "Example Page" at console. Only the last event is triggered when the event has the same name.

This is simple example. I use Vue Router and use socket only App.vue. For different operations, i check router name. It is very diffucult and complicated.

I want use different operations with same event name at different components.

I want output like this :

 Header Page
 Example Page
1
vue.jssocket.io

1 Answers

0
votes

It is possible by using mixins in Vue js

Just create a file mixin.js in src directory

mixin.js 

const myMixin = (value) => {
    return {
      created(){
        if (value) console.log(value);
      }
    }
}

export default myMixin;

In Header.vue import the mixin.js file

<script>
import myMixin from '../mixin.js';

export default {
    name: 'header-component',
    mixins: [myMixin("header page")],
  };
</script>

In Example.vue import the mixin.js file

<script>
import myMixin from '../mixin.js';

export default {
    name: 'example-component',
    mixins: [myMixin("example page")],
  };
</script>