vue2.0应用

1.创立一个文件名叫eventBus.js
该js文件的内容很简略，就是裸露一个vue实例而已。

import Vue from 'vue'export default new Vue

有人喜爱在main.js全局引入该js文件，我个别在须要应用到组件中引入。按需引入,哪里须要哪里引入

父组件中注册并应用子组件：

<template>  <div>    <Tow />    <One />  </div></template><script>import One from "../component/one";import Tow from "../component/noe2";export default {  data() {    return {};  },  components: { One, Tow },};</script>

别离在子组件one和two中引入eventBus.js

<template>  <div>    <button @click="sendClick">发送</button>  </div></template><script>import bus from "../utils/eventBus";export default {  data() {    return {};  },  methods: {    sendClick: function () {    $emit第一个参数,要和$on第一个参数统一      bus.$emit("send", "我来了");      // console.log(1);    },  },};</script>
<template>  <div>    <button @click="res">接管</button>  </div></template><script>import bus from "../utils/eventBus";export default {  data() {    return {};  },  methods: {    res: function () {    接管one组件传过来的值,send标识须要和one组件保持一致      bus.$on("send", (data) => {      data:one组件传过来的值        console.log(data); // 我来了      });    },  },  mounted() {    this.res();  },};</script>

vue3.0应用

  • Vue到3.0之后的Bus的形式变成了应用mitt。2.0是通过创立一个空的Vue来作为总线
  • Vue3.0中应用emit来注册 bus.emit(‘事件’,参数)
  • Vue3.0中应用on来监听，bus.on(‘taskLrowClick’, (e)=>{ console.log(e)；其余的逻辑操作 })
  • emit和on是成对呈现的，一个发动，一个接管，并且接管方能够是多个组件，只有第一个参数匹配，都能够接管到

应用倡议

能够在main.js外面全局引入，然而不倡议全局引入，因为Vue3.0是通过getCurrentInstance 办法去获取组件实例来实现一些次要性能，然而大家不要依赖 getCurrentInstance 办法去获取组件实例来实现一些次要性能，否则在我的项目打包后，肯定会报错的。

按需引入，那个组件须要就在哪里引入

1.装置mitt
npm install --save mitt
2.在src目录下创立utils文件夹文件夹下创立index.js文件

import mitt from 'mitt'const bus = mitt()export default bus

来个示例:

<template>  <div>    <One></One>    <Tow></Tow>  </div></template><script>import One from "../components/bus/one.vue";import Tow from "../components/bus/tow.vue";export default {  components: {    One,    Tow,  },};</script>

one.vue组件

<template>  <button @click="busClick">点我传值</button></template><script>import bus from "../../utils/eventBus";export default {  setup() {    const busClick = () => {      bus.emit("busSend", 123456);    };    return {      busClick,    };  },};</script>

tow.vue组件

<script>import { onMounted } from "vue";import bus from "../../utils/eventBus";export default {  setup() {    onMounted(() => {      bus.on("busSend", (data) => {        console.log(data); // 123456      });    });  },};</script>