关于vue.js:vue-bus-传值

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>