非父子通信（必须引入第三方插件才能实现 实现 mitt 要么就是 通过 Provide/inject , 再或者就是 通过 父子通信 ） 

1   <div id="app">
2         <first-child ></first-child>
3         <second-child></second-child>
4     </div>
 1 <script src="./js/vue.global.js"></script>
 2     <script src="./js/mitt.umd.js"></script>
 3     <script>
 4         //  创建mitter 实例化对象
 5         const mitter = mitt()
 6         console.log(mitter);
 7         const app = Vue.createApp({
 8             data(){
 9                 return {}
10             }
11         })
12         const FirstChild = {
13             data(){
14                 return {
15                     msg:"第一个数据 one",
16                     getmsg:''
17                 }
18             },
19             template:`<p @click='sendTwo'>one ==== {{getmsg}}</p>`,
20             created(){
21                 mitter.on('toone', (val) => {
22                     this.getmsg = val
23                 })
24             },
25             methods:{
26                 sendTwo(){
27                     mitter.emit('totwo', this.msg)
28                 }
29             }
30         }
31         const SecondChild = {
32             template:`<p @click='sendone'>two  ---- {{getmsg}}</p>`,
33             data(){
34                 return {
35                     msg:"第二个数据 two",
36                     getmsg:""
37                 }
38             },
39             created(){
40                 mitter.on('totwo', (val) => {
41                     this.getmsg = val
42                 })
43             },
44             methods:{
45                 sendone(){
46                     mitter.emit('toone', this.msg)
47                 }
48             }
49         }
50 
51         app.component('FirstChild', FirstChild)
52         app.component('SecondChild', SecondChild)
53 
54         app.mount('#app')
55     </script>
 vue2： 使用的 事件总线 EventBus 实现非父子通信  

        vue3 : 没有事件总线   通过第三方的插件 实现 mitt  
        要么就是  通过  Provide/inject , 再或者就是 通过 父子通信

 

 

posted @ 2022-07-11 10:33  请善待容嬷嬷  阅读(81)  评论(0)  编辑  收藏  举报