电子商务网站策划书布局设计海南百度推广电话

方法一：使用 $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>