Vue项目中使用中央事件总成进行参数传递
作用场景:当不使用VueX的情况下,且组件之间不存在父子关系,就可以使用到中央事件总成进行参数传递
步骤一:先是需要在 工具函数文件夹( untils ) 中创建一个相对应的函数文件
-
路径 src / untils / eventbus.js
import Vue from "vue";
const eventBus = new Vue()
export default eventBus;
步骤二:在 main.js 中让 项目的原型链上的 $eventbus 绑定上我们声明的 eventbus 工具函数
....
import bus from "@/untils/eventbus";
Vue.prototype.$eventbus = bus
new Vue({ ...
步骤三:在 组件一 中声明需要传递的数据
<template>
<div>
<button @click="sendfn">点击进行传值</button>
</div>
</template>
<script>
export default {
data() {
return {
text: "小明乘坐火车已经抵达"
}},
methods: {
sendfn() {
this.$eventbus.$emit("send", this.text)
}}
}
</script>
需要关注的语法点:
this.$eventbus.$emit("自定义数据名称", 需要传递的数据 )
步骤四:在 组件二 中对已经声明的数据进行接收
<template>
<div>
child2 :{{ text }}
</div>
</template>
<script>
export default {
data() {
return {
text: "小明仍然在乘坐火车"
}},
mounted() {
this.$eventbus.$on("send", (val) => {
this.text = val
})
}}
</script>
需要关注的语法点:
this.$eventbus.$on("自定义数据名称", (val) => { 对接收到的数据进行处理的函数 })
-
需要放在生命函数(此处使用 mounted )当中