vue兄弟（同胞）传值步骤

vue兄弟（同胞）传值步骤

1、src文件夹下创建中央事件总线eventBus文件夹及配置index.js文件夹

import Vue from 'vue'
export default new Vue

2、需要传值的zia页面内引入中央事件总线，并且创建触发传值事件

3、在中央事件总线的这个空vue实例之上绑定一个自定义事件$emit

<template><div>ziaaaaaaaaaaaaaaaaaaaa<br /><!-- 在传递方通过事件来触发 --><button @click="fun()">点我传值给zib</button></div>
</template>
<script>
// 引用中央事件总线
import EventBus from "@/eventBus";
export default {methods: {fun() {// 使用中央事件总线来传出数据// 在中央事件总线的这个空vue实例之上绑定一个自定义事件EventBus.$emit("zia", "我是子a的数据！");},},
};
</script>
<style>
</style>

4、接收传值的zib页面引入中央事件总线，并且使用$on监听接收数据

<template><div>zibbbbbbbbbbbbbbbbbbbb</div>
</template><script>
// 引用中央事件总线
import EventBus from "@/eventBus";
export default {mounted() {// 使用中央事件总线来监听-接收数据// $on("你要监听的事件名",(自定义事件上的数据)=>{// })EventBus.$on("zia", (val) => {console.log(val);});},
};
</script>
<style>
</style>