一般项目不大就利用事件车，公共的Vue实例进行传递数据 一共有两种写事件车的方式，下面一一介绍

  • 利用$emit发射自定义事件和 $on监听自定义事件
  • $off销毁事件

一、第一种方式 （创建公共文件）

src文件夹下建立公共文件


1.  // 建立公共的js文件（事件车），主要用来传递信息
1.  // 引入vue.js
1.  import Vue from 'vue';
1.  // 创建空的vue实例
1.  var event = new Vue();
1.
1.  export default event

home.vue文件


<template>
  <div id="home">
    <h2>这是首页</h2>
    <h3>{{list}}</h3>
    <h5>{{mymsg}}</h5>
 
    <button @click="biu">发射</button>
  </div>
</template>
<script>
// 在需要传递信息的地方引入
import bus from '../eventBus.js'
export default{
  data(){
    return{
      list:['少欲音','正太音','大叔音'],
      mymsg:''
    }
  },
  methods: {
    biu(){
      // 发射一个自定义事件，用来传递信息
      console.log(bus);
      bus.$emit('biulist',this.list)
    }
  },
  mounted() {// 组件挂载时触发的钩子函数
    // 接收信息
    bus.$on('msg',val =>{
      this.mymsg = val
    })
  },
}
</script

二、第二种方式直接挂载到原型

[]()在main.js中定义一个新的对象并挂载到vue原型上


Vue.prototype.$bus=new Vue()

home页


1.  methods: {
1.  msg() {
1.  //$emit发送数据携带数据
1.  this.$bus.$emit("A", {
1.  name: "张三",
1.  age: 20
1.  });
1.  }
1.

prodct.vue与首页毫无关联的页面


 mounted() {
//$on监听接收数据，这里注意一般写在mounted，计算属性里
this.$bus.$on("A", function(res) {
console.log(res);
});

两种方式任选其一哦！小编❤公_号前端老实人，可以一起聊天交流学习哦