父子组件通信$emit

最新推荐文章于 2024-11-03 19:51:25 发布

我胡为喜呀

最新推荐文章于 2024-11-03 19:51:25 发布

阅读量419

点赞数 9

文章标签： vue.js 前端开发语言

本文链接：https://blog.csdn.net/xu1912715645/article/details/135768275

版权

本文详细介绍了Vue中如何通过$emit机制，让子组件触发自定义事件并向父组件传递数据，以及父组件如何监听并处理这些事件，实现父子组件间的有效通信。

摘要由CSDN通过智能技术生成

文章目录

$emit 是vue中用于在子组件向父组件传递消息的一种机制。通过 $emit，子组件可以触发一个自定义事件，并向父组件传递数据。
例如：
以下是使用 $emit 的详细步骤：
1、子组件中触发自定义事件：

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 触发名为 'message' 的自定义事件，并传递数据 'Hello from Child!'
      this.$emit('message', 'Hello from Child!');
    },
  },
};
</script>

2、父组件中监听自定义事件：
在父组件中，使用 v-on（或简写为 @）指令监听子组件触发的自定义事件。在事件处理函数中，可以获取到子组件传递的数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @message="handleMessage" />
  <p>{{ receivedMessage }}</p>
</template>

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

export default {
  data() {
    return {
      receivedMessage: '',
    };
  },
  components: {
    ChildComponent,
  },
  methods: {
    handleMessage(message) {
      // 接收来自子组件的数据
      this.receivedMessage = message;
    },
  },
};
</script>

在这个例子中，子组件 ChildComponent 中的按钮被点击时，会触发名为 message 的自定义事件，并传递字符串 ‘Hello from Child!’。父组件 ParentComponent 监听到这个事件，在事件处理函数 handleMessage 中接收到子组件传递的数据，然后更新 receivedMessage 的值。

通过这种方式，子组件就可以将信息传递给父组件，实现了父子组件之间的通信。