vue中父组件接收子组件的多个参数的方法：$emit或事件总线

方法一：使用 $emit 方法

原理

子组件通过 $emit 方法向父组件发送事件，同时可以传递多个参数，父组件通过事件监听来接收这些参数。

示例

子组件代码

<template>
  <div>
    <button @click="sendData">发送数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      // 通过 $emit 发送多个参数
      this.$emit("send-data", "参数1", { key: "参数2" }, [1, 2, 3]);
    },
  },
};
</script>

父组件代码

<template>
  <div>
    <ChildComponent @send-data="handleData" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleData(param1, param2, param3) {
      console.log("接收到的参数1：", param1);
      console.log("接收到的参数2：", param2);
      console.log("接收到的参数3：", param3);
    },
  },
};
</script>

方法二：使用事件总线（Event Bus）

原理

事件总线是一个 Vue 实例，用于在非父子组件之间传递数据。通过 $on监听事件，$emit 触发事件。

步骤

创建一个事件总线实例（通常是在独立的文件中）。
子组件通过事件总线发送事件和数据。
父组件通过事件总线接收事件和数据。

示例

创建事件总线（eventBus.js）

import Vue from "vue";
export const EventBus = new Vue();

子组件代码

<template>
  <div>
    <button @click="sendData">通过事件总线发送数据</button>
  </div>
</template>

<script>
import { EventBus } from "./eventBus";

export default {
  methods: {
    sendData() {
      // 通过 EventBus 发送事件和多个参数
      EventBus.$emit("data-from-child", "参数1", { key: "参数2" }, [1, 2, 3]);
    },
  },
};
</script>

父组件代码

<template>
  <div>
    <p>父组件监听事件总线</p>
  </div>
</template>

<script>
import { EventBus } from "./eventBus";

export default {
  created() {
    // 监听事件总线中的事件
    EventBus.$on("data-from-child", this.handleData);
  },
  methods: {
    handleData(param1, param2, param3) {
      console.log("接收到的参数1：", param1);
      console.log("接收到的参数2：", param2);
      console.log("接收到的参数3：", param3);
    },
  },
  beforeDestroy() {
    // 避免内存泄漏，销毁事件监听
    EventBus.$off("data-from-child", this.handleData);
  },
};
</script>

原文地址：https://blog.csdn.net/qq_55018264/article/details/144384681

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！