一般项目不大就利用事件车，公共的Vue实例进行传递数据
一共有两种写事件车的方式，下面一一介绍
- 利用$emit发射自定义事件和 $on监听自定义事件
- $off销毁事件
一、第一种方式 （创建公共文件）
src文件夹下建立公共文件
// 建立公共的js文件（事件车），主要用来传递信息 // 引入vue.js import Vue from 'vue'; // 创建空的vue实例 var event = new Vue(); 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>
prodct.vue与首页毫无关联的页面
1.<template> <div id="product"> <h2>这是商品页</h2> <ul v-for="val in item"> <li>{{val}}</li> </ul> <button @click="fn">点击发射</button> </div> </template> <script> // 在需要传递数据的地方引入 import bus from '../eventBus.js' export default{ data() { return { item:null } }, methods: { fn(){ bus.$emit('msg','这是商品页传来的数据') } }, mounted() { // 接收信息 bus.$on('biulist',val =>{ this.item = val }) }, } </script>
二、第二种方式直接挂载到原型
在main.js中定义一个新的对象并挂载到vue原型上
Vue.prototype.$bus=new Vue();
home页
methods: { msg() { //$emit发送数据携带数据 this.$bus.$emit("A", { name: "张三", age: 20 }); } }
prodct.vue与首页毫无关联的页面
1.mounted() { //$on监听接收数据，这里注意一般写在mounted，计算属性里 this.$bus.$on("A", function(res) { console.log(res); }); }
两种方式任选其一哦！小编公_号❤前端老实人，可以一起聊天交流学习哦！
