vue嵌套路由之间的通信（eventbus实现组件之间相互传值）

效果：

其实用法跟父子组件之间的通信方法相似哈，闲得时候研究了一下，其实更简单的方法可以用vuex

1.先在main.js里生成一个自定义事件

2.这是我路由设置的嵌套路由

3.用法：

A.子路由接收父路由上的值可以直接用this.$parent.value   

B.副路由接收子路由用自定义事件 

    子路由里的事件绑定 ：

     this.$root.myEvent.$emit("trans", value);   //myEvent是main.js里设置的空的vue实例名

     父路由监听：

     that.$root.myEvent.$on("trans", function(msg) {
        console.log("子路由传过来的值  " + msg);
      });

 

 

4.现在直接上两个页面的代码

父路由：

<template>
  <div class="parent">
    <div>我是父组件的内容</div>
    <p>父路由设置的值{{parent}}</p>
    <button @click="reduce">减一个数</button>
    <hr>
    <p>我是从子路由里哪来的值{{getchild}} </p>
    <router-view class="bottom"></router-view>
  </div>
</template>
<script>
export default {
  name: "parent",

  data() {
    return {
      parent: 0,
      getchild: 0,
    };
  },

  props: {},
  components: {},
  created() {
    this.change(55);
    this.lisen();
  },
  mounted() {},
  methods: {
    change(value) {
      this.parent = value;
    },
    reduce() {
      this.parent = this.parent - 1;
    },

    lisen() {
      var that = this;
      that.$root.myEvent.$on("trans", function(msg) {
        console.log("子路由传过来的值  " + msg);
        that.getchild = msg;
      });
    }
  },
  computed: {

  },
  watch: {

  }
};
</script>

<style>
.parent {
  background: pink;
}
</style>

子路由代码：

<template>
  <div class="child">
    <div>我是子路由的内容</div>
    <p>{{child}}</p>
    <button @click="add">加一个数</button>
    <hr>
    <p>我是从父路由里拿过来的值 {{this.$parent.parent}}</p>
  </div>
</template>

<script>
export default {
  name: "child",

  data() {
    return {
      getparent: 0,
      child: 0
    };
  },

  props: {},
  components: {},
  created() {
    this.get();
  },

  mounted() {},
  methods: {
   
    get() {
      this.getparent = this.$parent.parent;
    },

    // 加数字是绑定一个自定义事件
    add() {
      this.child = this.child + 1;
      // console.log(this.child);
      this.$root.myEvent.$emit("trans", this.child);  //increment事件触发后，自动触发trans事件
    }
  },

  computed: {}
};
</script>

<style>
.child {
  background: lightblue;
}
</style>

 

补充： 看很多说用$emit自定义事件之后监听不起作用应该是没用在一个公共实例上图下的方法也可以实现的同上原理