Vue之非父子组件的通信

淩亂°似流年 2022-04-17 23:59 290阅读 0赞

新建一个VueEvent.js，创建一个Vue实例充当中间传输媒介

//1.引入Vue
    import Vue from 'vue'
    //2.实例化一个Vue对象
    var VueEvent = new Vue()
    //3.实例化的Vue对象暴露出去
    export default VueEvent

在通信组件内分别引入VueEvent.js，这里是Home和About两个组件之间通信  
Home.vue通过$on接受About.vue传过来的数据:

<template>
      <div class="home">
        这是Home组件
      </div>
    </template>
    
    <script>
    import VueEvent from "../VueEvent.js"
    export default {
      data(){
        return{
          title:"这是home组件"
        }
      },
      mounted(){
        VueEvent.$on("tohome",function(data){
          this.title = data;
          console.log(this.title)
        })
      }
    }
    </script>

About.vue通过$emit向Home.vue发送数据:

<template>
      <div class="about">
        这是about组件
        <button class="button" @click="emitToHome">About</button>
      </div>
    </template>
    
    <script>
    import VueEvent from "../VueEvent.js"
    export default {
      data(){
        return{
          title:"这是about组件"
        }
      },
      methods:{
        emitToHome(){
          VueEvent.$emit("tohome",this.title)
        }
      }
    }
    </script>

主组件分别引入Home.vue和About.vue：

<template>
      <div id="root">
        <v-home></v-home>
        <br>
        <br>
        <br>
        <br>
        <br>
        <v-about></v-about>
      </div>
    </template>
    
    <script>
    // 1.引入组件
    import Home from "./views/Home.vue"
    import About from "./views/About.vue"
    export default {
      //2.注册组件
      components:{
        'v-home' : Home,
        'v-about' : About
      },
      data(){
        return{
         
        }
      },
      methods:{
        
      }
    }
    </script>