Vue3中兄弟组件之间传递事件的正确简单实现方法是什么？

你的思路是完全正确的，兄弟组件之间的事件传递最简单的实现方式就是通过共同的父组件做中转，不需要引入任何额外第三方库，用Vue原生能力即可实现，具体实现步骤如下：

步骤1：父组件监听FileLoader的抛出事件 #

首先修改父组件模板，给FileLoader绑定和子组件emit名称完全一致的监听事件，同时在父组件声明一个响应式变量作为更新触发标记，传给FileViewer组件：

<div class="row">
  <div class="col">
    <!-- 监听子组件抛出的new-file-loaded事件，触发父组件处理逻辑 -->
    <FileLoader @new-file-loaded="handleFileLoaded"/>
  </div>
</div>
<div class="row">
  <div class="col">
    <!-- 将更新标记通过props传给FileViewer -->
    <FileViewer :update-trigger="fileUpdateFlag" />
  </div>
</div>

父组件逻辑代码（Vue3组合式API写法，官方推荐）：

import { ref } from 'vue'

// 响应式更新标记，初始值可随意设置
const fileUpdateFlag = ref(0)

// 收到文件上传成功事件后的处理函数
const handleFileLoaded = () => {
  // 修改标记值，触发FileViewer的属性更新监听
  fileUpdateFlag.value += 1
  // 如果需要传递上传后的文件信息，子组件emit时可以携带参数：this.$emit('new-file-loaded', fileInfo)
  // 这里可以直接拿到参数存储后传给FileViewer即可
}

如果用选项式API，父组件逻辑如下：

export default {
  data() {
    return {
      fileUpdateFlag: 0
    }
  },
  methods: {
    handleFileLoaded() {
      this.fileUpdateFlag += 1
    }
  }
}

步骤2：FileViewer监听触发标记执行刷新逻辑 #

在FileViewer组件中声明props接收更新标记，监听标记变化后执行文件刷新的业务逻辑即可：
组合式API写法：

import { watch } from 'vue'

// 声明接收的props
const props = defineProps(['updateTrigger'])

// 监听更新标记变化
watch(() => props.updateTrigger, () => {
  // 此处写你的文件刷新逻辑，比如重新拉取文件列表、渲染新上传的文件等
  console.log('收到文件更新通知，开始刷新展示')
  loadFileData()
})

选项式API写法：

export default {
  props: ['updateTrigger'],
  watch: {
    updateTrigger() {
      // 执行刷新逻辑
      this.loadFileData()
    }
  }
}

内容的提问来源于stack exchange，提问作者Stealth Rabbi