child.vue在mounted阶段emit值到parent.vue不生效如何解决

问题原因与修复方案 #

核心问题1：自定义事件监听位置错误 #

子组件触发的info自定义事件，必须绑定在父组件调用子组件的标签上，你当前将@info绑定在父组件自身的普通div上，自然无法接收子组件emit的事件。

核心问题2：父组件缺少必要逻辑 #

你当前的父组件代码存在三处缺失：

• 没有定义存储子组件传递的hide值的状态变量
• 没有实现info事件对应的处理函数
• 两个控制显隐的div没有添加v-if判断逻辑

修复后父组件完整代码 #

<template>
  <div>
    <!-- 事件监听绑定到子组件标签上 -->
    <child @info="handleInfo" />
    <!-- 绑定显隐判断条件 -->
    <div v-if="!hide">THIS DIV SHOULD BE SHOWN IF this.hide = false</div>
    <div v-if="hide">THIS DIV SHOULD BE SHOWN IF this.hide = true</div>
  </div>
</template>

<script>
import Child from './child.vue'
export default {
  components: { Child },
  data() {
    return {
      // 定义状态存储子组件传值
      hide: true
    }
  },
  methods: {
    // 实现事件处理函数，接收子组件传递的参数
    handleInfo(val) {
      this.hide = val
    }
  }
}
</script>

子组件可选优化（动态场景适用） #

如果你的hide值会在mounted生命周期之后发生变化，建议添加监听逻辑自动emit，避免漏发事件：

<script>
export default {
  data(){
    return {
      hide: true,
    }
  },
  watch: {
    // 监听hide变化，每次更新自动同步给父组件
    hide(newVal) {
      this.$emit('info', newVal)
    }
  },
  mounted() {
    if (statement) {
      if(some statement) {
        //do something
      } else {
        this.hide = false;
      }
    }
  }
}
</script>

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