vue eventBus（个人笔记）

eventBus.js

import Vue from 'vue'

export default new Vue();

busOne.vue发送数据

<template>
    <div>
        <div>busOne</div>
        <button @click="sendMsg">给busTwo传数据</button>
    </div>
</template>

<script>
import bus from '../assets/eventBus.js' // 引入eventBus.js
export default {
    name: 'busOne',
    data(){
        return {
        }
    },
    methods: {
        sendMsg: function() {
            this.$router.push({ path:'/busTwo'  }) //跳转到busTwo页面
        }
    },
    destroyed() {
        bus.$emit("sendMsgToBusTwo", "这是busOne传过来的参"); // 给busTwo页面传数据
        bus.$off("sendMsgToBusTwo"); //手动销毁事件
    }
}
</script>

busTwo.vue

<template>
  <div>
    <div>busTwo</div>
    <button @click="getMsg">获取busOne传过来的参数</button>
  </div>
</template>

<script>
import bus from '../assets/eventBus.js'

export default {
  name: 'busTwo',
  data() {
    return {
      busOneMsg: '',
    }
  },
  created() {
    let that = this;
    bus.$on("sendMsgToBusTwo", function (msg) { // 获取busOne传的参数
      console.log("created" + msg);
      that.busOneMsg = msg;
    })
  },
  methods: {
    getMsg: function () {
      console.log("busOneMsg" + this.busOneMsg); // 使用参数
    }
  },
  destroyed() {
    bus.$off("sendMsgToBusTwo") //手动销毁事件
  }
}
</script>

需要注意的坑由下文链接填：

链接：https://blog.csdn.net/Wayne8016/article/details/103261081

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。