如何在VUE3中解决mitt事件在复用组件中重复执行的问题？

Question

VUE3中 在复用组件中使用mitt，重复执行
childA

<script lang="ts" setup>
const handleFunc = () => {
     mitter.emit('on-func')
}
</script>

childB

<script lang="ts" setup>
const count = ref<number>(0)
onMounted(() => {
    mitter.on('on-func')
    count.value++
    console.log('count', count.value)
})
</script>

父组件--parent

<template>
   <childA />
   <childB />
</template>

在页面中复用父组件

<template>
   <parent />
  <parent />
  <parent />
</template>

上述代码中，当触发三个<parent />组件其中之一的时候，<childB />中的 mitter.on('on-func')会被触发三次。
复用组件的时候，mitt会存在组件隔离吗，如果mitter.on只想被当前组件的mitter.emit所触发，要怎么写。

Answer 1

通过 mitt 独立实例避免事件监听器在全局范围内触发的问题

创建一个 mitt 实例工厂

在 utils 文件夹中创建一个 mittFactory.ts 文件，用于生成 mitt 实例：

// utils/mittFactory.ts
import mitt from 'mitt';

export const createMitt = () => {
  return mitt();
};

在组件中使用独立的 mitt 实例

在每个组件中引入并使用这个工厂函数来创建 mitt 实例。

childA.vue

<script lang="ts" setup>
import { createMitt } from '../utils/mittFactory';

const mitter = createMitt();

const handleFunc = () => {
  mitter.emit('on-func');
};
</script>

childB.vue

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { createMitt } from '../utils/mittFactory';

const mitter = createMitt();
const count = ref<number>(0);

onMounted(() => {
  mitter.on('on-func', () => {
    count.value++;
    console.log('count', count.value);
  });
});
</script>

在父组件中传递 mitt 实例

在父组件中创建 mitt 实例并通过 props 传递给子组件。

parent.vue

<template>
  <childA :mitter="mitter" />
  <childB :mitter="mitter" />
</template>

<script lang="ts" setup>
import { createMitt } from '../utils/mittFactory';
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';

const mitter = createMitt();
</script>

在子组件中接收 mitt 实例

修改子组件以接收并使用传递的 mitt 实例。

childA.vue

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{ mitter: any }>();

const handleFunc = () => {
  props.mitter.emit('on-func');
};
</script>

childB.vue

<script lang="ts" setup>
import { ref, onMounted, defineProps } from 'vue';

const props = defineProps<{ mitter: any }>();
const count = ref<number>(0);

onMounted(() => {
  props.mitter.on('on-func', () => {
    count.value++;
    console.log('count', count.value);
  });
});
</script>

通样每个父组件实例都会有自己的 mitt 实例，从而避免了事件监听器在全局范围内触发的问题。