VUE3 + element-plus 中，子组件使用 this.$emit 发送消息，父组件为什么接收不到？-js教程-PHP中文网

VUE3 + element-plus 中，子组件使用 this.$emit 发送消息，父组件为什么接收不到？

花韻仙語

发布： 2024-11-11 14:54:25

原创

680人浏览过

vue3 + element-plus 中，子组件使用 this.$emit 发送消息，父组件为什么接收不到？

vue3 + element-plus, this.$emit失效，为什么？

问题描述

在 vue3 + element-plus 中，子组件使用 this.$emit 向父组件发送消息，但在父组件中无法收到。

分析和解决

根据提供的代码，可以发现以下问题：

1. 子组件的事件名不正确

子组件中使用 this.$emit("conditionupdate") 触发自定义事件，但父组件的事件监听器却是 "update"。两者名称不一致导致消息发送失败。

立即学习“前端免费学习笔记（深入）”；

2. 子组件未注册事件

小鸽子助手

一款集成于WPS/Word的智能写作插件

查看详情

父组件需要在渲染子组件时注册事件监听器，才能接收子组件发送的消息。

修改后的代码

子组件

<script>
import {ref} from 'vue';
export default {
  name: 'newnew',
  props: ['column', 'column_filter_type', 'select_items'],
  data() {
    return {
      open_flag: ref(true),
      condition: {
        value_start: '',
        value_end: ''
      }
    }
  },
  methods: {
    confirm() {
      this.open_flag = false;
      // ...这里应该依据条件类型做校验
      this.$emit('update', {
        column: this.column,
        column_filter_type: this.column_filter_type,
        condition: this.condition
      });
    }
  }
}
</script>

登录后复制

父组件

<newnew
    ...
    @update="conditionUpdate"  // 注册事件监听器
/>

登录后复制

通过以上修改，子组件可以正确向父组件发送消息，从而触发父组件中的 conditionupdate 方法。

以上就是VUE3 + element-plus 中，子组件使用 this.$emit 发送消息，父组件为什么接收不到？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue v-for 高效分组渲染与条件差异化展示教程 Vue教程：避免DOM操作中的‘null’错误，掌握id与ref的正确用法 Vue 3 教程：如何在 data 和 props 属性同名时精确监听变更 Vue组件中监听data和prop变化：避免命名冲突与高级监听技巧 Vue 组件中同名 Prop 与 Data 属性的监听策略