效果预览
点击按钮后
实现原理
- 通过新建的全局 vue 实例，挂载一个全局自定义事件 new Vue()
- 在哥哥组件中绑定自定义事件 event.$on
- 在弟弟组件中触发自定义事件 event.$emit
- 在哥哥组件销毁时，销毁自定义事件 event.$off
完整代码范例
src\views\index.vue
<template> <div> <Child1 /> <hr /> <Child2 /> </div> </template> <script> import Child1 from "./child1.vue"; import Child2 from "./child2.vue"; export default { components: { Child1, Child2, }, }; </script>
src\views\child1.vue
<template> <div> <div>我是哥哥</div> <div> 我收到了弟弟送来的 <span style="color: red;font-weight: bold;"> {{ gift || "?" }}</span> </div> </div> </template> <script> import event from "./event"; export default { data() { return { gift: "", }; }, methods: { // 接收礼物 get_gift(val) { this.gift = val; }, }, mounted() { // 绑定自定义事件 event.$on("get_gift", this.get_gift); }, beforeDestroy() { // 及时销毁，否则可能造成内存泄露 event.$off("get_gift", this.get_gift); }, }; </script>
src\views\child2.vue
<template> <div> <div>我是弟弟</div> <button @click="send_apple">给哥哥一个苹果</button> </div> </template> <script> import event from "./event"; export default { methods: { send_apple() { // 调用自定义事件 event.$emit("get_gift", "苹果"); }, }, }; </script>
src\views\event.js
import Vue from "vue"; // 新建一个全局vue实例，用于挂载全局自定义事件 export default new Vue();
