Vue 事件车

1：非父子之间的事件车传值
在main.js之中定义一个新的对象

//非父组件之间的通信使用事件车 来源于new Vue()
Vue.prototype.EmitEvent=new Vue();

左：

<template>
  <div id="menuchild">
    我是左端的子组件
    <!--
      非父子之间的传递数据
    -->
    <button @click="sendmsg">传递数据</button>
  </div>
</template>
<script>
export default {
  name: "menuchild",
  methods: {
    sendmsg() {
      //发送数据发布自定义数据携带数据
      this.EmitEvent.$emit("go-event", {
        name: "张三",
        age: 20
      });
    }
  },
  mounted() {
    this.EmitEvent.$on("go-left", function(res) {
      console.log(res);
    });
  }
};
</script>

右：

<template>
  <div id="contentinfo">
    我是右端的子组件
    <button @click="sendto">发送左边的数据</button>
  </div>
</template>
<script>
export default {
  name: "contentinfo",
  mounted() {
    //该组件渲染完成之后 自动监听自定义事件
    //new Vue对象
    this.EmitEvent.$on("go-event", function(result) {
      console.log(result);
    });
  },
  methods: {
    sendto() {
      this.EmitEvent.$emit("go-left", "abcdef");
    }
  }
};
</script>

2：父子组件之间的事件车传值
自定义事件 $emit(触发) $on(监听) 触发事件车，组件的自定义事件 在子组件内部进行触发，在父组件中做监听处理，监听到之后调用的方法是父组件的方法，这样的作用是子组件修改父组件的相关变量。
父组件：

<template>
  <div id="toptitle">
    <v-logo v-on:my-event="doSomthing"></v-logo>
  </div>
</template>
<script>
import logo from './child/logo'
export default{
  name:"toptitle",
  components:{
    'v-logo':logo
  },
  data(){
    return {
      //比如下面的两个信息是后台返回的
      name:"学生信息管理",
      logo:"src/assets/logo.png"
    }
  },
  methods: {
   doSomthing(){
      console.log("监听自定义事件");
    }
  }
}
</script>

子组件：

<template>
  <div id="logoinfo">
    <button @click="sendMsg">父组件触发</button>
  </div>
</template>
<script>
export default {
  name: "logoinfo",
  props:{
      logoimg:{
          type:String,
          default:"src/assets/wanmou.jpg"
      },
      sysname:String,
  },
  methods: {
    sendMsg(){
      //做自定义事件触发
      //自定义事件是先监听 v-on 然后再$emit 再进行触发 
      this.$emit("my-event");
    },
  }
}
</script>