当前位置: 代码迷 >> 综合 >> vue兄弟组件之间传值 eventBus
  详细解决方案

vue兄弟组件之间传值 eventBus

热度:14   发布时间:2023-12-03 15:57:49.0

 

 发送方组件代码

<template><div><input type="button" value="left组件发送信息" @click="handleSendMsg" /></div>
</template><script>
import bus from "@/components/eventBus.js";
export default {name: "left",data() {return {msg: "right组件你好 我是left",};},methods: {handleSendMsg() {bus.$emit("handleSendMsg", this.msg);},},
};
</script><style>
</style>

接收方组件代码

<template><div><h2>兄弟left传来的值是 {
   { msg }}</h2></div>
</template><script>
import bus from "@/components/eventBus.js";
export default {name: "right",data() {return {msg: "",};},created() {bus.$on("handleSendMsg", (val) => {this.msg = val;});console.log("fdfdfd");},
};
</script><style>
</style>