Vue3子组件Emit事件未触发父组件方法问题求助

1. 修正事件名称的大小写匹配问题 #

HTML模板属性不区分大小写，你在父组件模板里写的@hideLoaderEvent会被浏览器自动转为全小写的@hideloaderevent，但子组件$emit的是hideLoaderEvent，两者无法匹配，这是事件未触发的核心原因。

解决：
统一使用短横线分隔的命名格式（kebab-case）：

• 子组件修改$emit的事件名：

this.$emit('hide-loader-event', false);

• 父组件模板修改事件监听：

<MyComponent @hide-loader-event="updateLoader" />

2. 确保子组件fetchData方法被执行 #

你的子组件仅定义了fetchData方法，但没有触发逻辑（比如组件挂载时调用、父组件主动触发）。如果方法没执行，自然不会触发$emit。

解决：
如果需要组件挂载就发起请求，在子组件中添加mounted钩子：

export default {
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() { 
      fetch(url, options)
        .then((response) => response.json())
        .then(() => this.$emit('hide-loader-event', false))
        .catch(err => {
          console.error('请求出错:', err);
          this.$emit('hide-loader-event', false); // 出错也要关闭加载动画
        });
    }
  }
}

如果需要父组件控制请求时机，通过ref调用子组件方法：

<!-- parent.vue 模板 -->
<MyComponent ref="myComponent" @hide-loader-event="updateLoader" />

// parent.vue 方法
triggerFetch() {
  this.showLoader = true;
  this.$refs.myComponent.fetchData();
}

3. 处理请求异常场景 #

fetch API仅在网络故障时进入catch，HTTP错误状态码（如404、500）仍会走到then，但如果JSON解析失败（返回非JSON格式），会抛出错误导致后续then不执行，加载动画无法关闭。

解决：
添加catch块捕获所有异常，确保无论请求成功/失败都触发关闭动画的事件：

fetch(url, options)
  .then((response) => {
    // 先校验HTTP状态码是否正常
    if (!response.ok) {
      throw new Error(`HTTP错误: ${response.status}`);
    }
    return response.json();
  })
  .then(() => this.$emit('hide-loader-event', false))
  .catch(err => {
    console.error('请求失败:', err);
    this.$emit('hide-loader-event', false);
  });

4. 确认父组件showLoader的赋值时机 #

你提到“调用子组件前将this.showLoader设为true”，需确保该赋值逻辑在请求触发前执行，比如点击按钮触发请求时，先设置showLoader = true，再调用子组件的fetchData方法。

内容的提问来源于stack exchange，提问作者Jonathan Harker