Vue.js 如何在不同的Vue组件上同时使用SocketIO事件

我有3个组件。App.vue、Header.vue和Example.vue

App.vue是我的父组件。Header.vue和Example.vue是我的子组件

My Header.vue

created（）

方法：

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

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

My Example.vue

created（）

方法：

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

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

当页面呈现时，我在控制台上只看到“示例页面”。 当事件具有相同名称时，仅触发最后一个事件

这是一个简单的例子。我使用Vue路由器，并且只使用套接字App.Vue。对于不同的操作，我检查路由器名称。这是非常困难和复杂的

我希望在不同的组件上使用具有相同事件名称的不同操作

我想要这样的输出：

 Header Page
 Example Page

---

在Vue js中使用mixin是可能的

只需在src目录中创建一个文件mixin.js

mixin.js

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

export default myMixin;

在Header.vue中导入mixin.js文件

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

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

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

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

从“../mixin.js”导入myMixin；
导出默认值{
名称：'标题组件'，
mixin:[myMixin（“页眉”）]，
};

在Example.vue中，导入mixin.js文件

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

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

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

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

从“../mixin.js”导入myMixin；
导出默认值{
名称：“示例组件”，
mixin:[myMixin（“示例页面”）]，
};

在Vue js中使用mixin是可能的

只需在src目录中创建一个文件mixin.js

mixin.js

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

export default myMixin;

在Header.vue中导入mixin.js文件

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

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

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

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

从“../mixin.js”导入myMixin；
导出默认值{
名称：'标题组件'，
mixin:[myMixin（“页眉”）]，
};

在Example.vue中，导入mixin.js文件

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

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

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

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

从“../mixin.js”导入myMixin；
导出默认值{
名称：“示例组件”，
mixin:[myMixin（“示例页面”）]，
};

谢谢您的回复@chans。但它不适用于套接字。这个问题是事件问题。您的示例使用普通函数。我想要相同的事件而不是相同的功能。对不起，我的englishImport套接字对象，并在mixin中使用它，对不起。同样的问题。我用过，但不工作。因为套接字事件仅发生1次感谢您的回复@chans。但它不适用于套接字。这个问题是事件问题。您的示例使用普通函数。我想要相同的事件而不是相同的功能。对不起，我的englishImport套接字对象，并在mixin中使用它，对不起。同样的问题。我用过，但不工作。因为套接字事件只有1次