Vue.js 中触发子组件方法：Ref vs. 事件总线，哪个更合适？

vue.js

2024-03-07 11:21:20

触发子组件方法：Ref vs. 事件总线

作为一名经验丰富的程序员和技术作家，我在工作中经常遇到需要在父组件中触发子组件方法的情况。为了解决这个问题，有两种流行的方法：Ref 和事件总线。

## Ref

Ref 是一个允许我们直接访问子组件实例的 Vue.js 功能。通过在父组件中使用 Ref，我们可以获取子组件的引用并调用其方法。这种方法非常适合需要在父组件中直接控制子组件行为的情况。

### 优点

组件分离性强： 父组件和子组件的职责清晰分离。
易于维护： 在父组件中添加新的按钮或动作时，易于扩展。

### 使用 Ref 的示例

<template>
  <HeaderLayout>
    <UButton @click="resetSummary()">重置摘要</UButton>
  </HeaderLayout>
  <TextSummarizer ref="textSummarizer" />
</template>

<script>
import TextSummarizer from './TextSummarizer.vue';

export default {
  components: { TextSummarizer },
  setup() {
    const textSummarizerRef = ref(null);

    const resetSummary = () => {
      if (textSummarizerRef.value) {
        textSummarizerRef.value.resetSummary();
      }
    };

    return {
      textSummarizerRef,
      resetSummary,
    };
  },
};
</script>

在子组件中：

<script>
export default {
  methods: {
    resetSummary() {
      // 代码以重置摘要
    },
  },
};
</script>

## 事件总线

事件总线是一种在 Vue.js 组件之间通信的机制。它允许我们创建一个中心事件处理器，用于触发和监听事件。使用事件总线，我们可以轻松地在父组件中触发子组件的方法，而无需直接访问其实例。

### 优点

组件间通信松耦合： 事件总线允许我们使用事件来触发不同子组件的方法，无需直接访问其实例。
易于扩展： 可以不修改子组件的情况下添加新的事件和处理程序。

### 使用事件总线的示例

在父组件中：

<template>
  <HeaderLayout>
    <UButton @click="resetSummary()">重置摘要</UButton>
  </HeaderLayout>
  <TextSummarizer />
</template>

<script>
import TextSummarizer from './TextSummarizer.vue';
import { useEventBus } from '../composables/useEventBus';

export default {
  components: { TextSummarizer },
  setup() {
    const { eventBus } = useEventBus();

    const resetSummary = () => {
      eventBus.emit('reset-summary');
    };

    return {
      resetSummary,
    };
  },
};
</script>

在子组件中：

<script>
import { useEventBus } from '../composables/useEventBus';

export default {
  setup() {
    const { eventBus } = useEventBus();

    eventBus.on('reset-summary', () => {
      // 代码以重置摘要
    });

    return {};
  },
};
</script>