关于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>