兄弟组件【非父子组件】之间的传值

周大胖子

这就麻烦喽，咳咳  我现在学到的地方麻烦而已，后面就不麻烦了；

第一步，先滚过去新建一个js文件  重新 写一个vue实例并暴露出去；
/src/model/vueEvent.js

2. import Vue from 'vue
3. var VueEvent = new Vue;
5. export default VueEvent;

复制代码

第二步， 在需要广播的地方引入刚刚的实例 【我是从home向news中广播数据】，并利用 VueEvent.$emit('名称','值') 广播出该事件VueEvent可换
Home.vue

1. <template>
2.     <div id="home">
3.         <!-- 头部组件引入 -->
4.         这是home组件
6.         <button @click="abc()">给News广播</button>
7.     </div>
8. </template>
10. <script>
11. import Head from "./Head.vue";
12. import VueEvent from "../model/vueEvent.js"
13. export default {
14.   data() {
15.     return {
16.       b:false
17.       ,todata:'这是home组件的值'
18.       ,mvc:'溜溜留'
19.     };
20.   },
21.   methods: {
22.     //  向news广播
23.     abc(){
24.         // 广播数据
25.         VueEvent.$emit('to-news',this.todata)
26.     }
27.   }
29. };
30. </script>
32. <style scoped>
34. </style>

复制代码

第三步 ，在需要的组件中 接收 广播来的数据 【注意要引入实例化的vue】.利用 $on 写在,mouted(){ }中
News.vue

1. <template>
2.     <div id="news">
3.         这是news组件
5.     </div>
6. </template>
8. <script>
9. import VueEvent from "../model/vueEvent.js";
10. export default {
11.   data() {
12.     return {
13.       b: false,
14.       a: "这是news组件的值",
15.     };
16.   },
17.   methods: {
18.       // 广播数据
19.       
20.   }
21.   ,mounted(){       //在组件加载的时候就接收
22.         VueEvent.$on("to-news", function(e){
23.             console.log(e)
24.         });   //接收数据
25.   }
26. };
27. </script>
29. <style>
30. </style>

复制代码