Vue之非父子组件的通信-蒲公英云

Vue之非父子组件的通信

新建一个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>