乐趣区

关于前端:Vue兄弟组件通信事件车

jiezi

明天给大家介绍一种 vue 的兄弟组件间通信形式—— 事件车 。

事件车的基本原理就是在本我的项目 Vue 的原型对象里新生成一个 Vue 对象专门用来负责兄弟组件间的通信。
我将通过一个事件管理器来简略解说事件车的原理。

1. 首先在 components 文件夹下创立一个子组件 Input.vue, 其中领有一个输入框和增加事件的按钮。
而后在 data 里申明变量 event 与输入框双向绑定，在 buttton 上绑定点击事件 addEvent 并临时通过打印 event 查看性能是否齐备。

<template>
    <div>
        <input type="text" v-model="event"><button @click="addEvent"> 增加事件 </button>
    </div>
</template>
<script>
export default {
    name:"Input",
    data(){
        return{event:""}
    },
    methods:{addEvent(){console.log(this.event);
        }
    }
}
</script>

这时的页面及其打印成果是这样的：

此时阐明 Input.vue 中的数据及办法失常。

2. 接下来咱们在 components 中新建一个 list.vue 用来寄存 Input.vue 里输出的代办事件。
此时可写一些假数据在其中，例如在 data 里写一个 events 数组，而后在 div 中渲染进去。
代码如下：

<template>
    <div>
        <h3 v-for="(item,index) of events" :key="index">{{index+1}}:{{item}}</h3>
    </div>
</template>
<script>
export default {
    name:"List",
    data(){
        return{events:["吃饭","睡觉"]
        }
    }
}
</script>

3. 将 Input.vue 和 List.vue 引入 Home.vue,
代码如下：

<template>
  <div class="home">
    <h1> 事件管理器 </h1>
    <Input/>
    <List/>
  </div>
</template>
<script>
// @ is an alias to /src
import Input from "@/components/Input"
import List from "@/components/List"
export default {
  name: 'Home',
  components: {
    Input,
    List
  }
}
</script>

此时的页面渲染进去是这样的：

4. 接下来就是明天的配角退场了，咱们首先要去 main.js 里新生成一个 Vue 对象，我这里取名叫做 $bus 在 main.js 内增加如下代码：

Vue.prototype.$bus = new Vue();

这句话的意思是在本我的项目 Vue 对象的原型对象中新增一个名为 $bus 的 Vue 对象，这个新增的原型对象也就是所谓的事件车。
那么咱们如何通过工夫车实现兄弟组件通信呢？很简略。

5. 回到 Input.vue 中，此时咱们在这里调用刚刚定义的 addEvent 函数，并在该函数里调用 $bus.$emit() 进行传参，$emit() 这个函数大家应该比拟相熟吧，两个参数第一个参数为事件名，第二个参数为须要传递的值。
代码如下：

        addEvent(){this.$bus.$emit("sendEvent",this.event);
            console.log("输出数据已发送");
        }

这段代码的意思是通过 $bus.$emit() 函数来传递用户输出的数据（也就是 this.event），在另一个组件里须要用事件名 sendEvent 来接住该数据。此时的数据曾经发送。

6. 最初来到 List.vue 中的 created 生命周期函数（也可应用 mounted）中应用 $bus.$on() 函数接住 Input.vue 里传来的数据并插入到 events 数组内。$on 函数的两个参数别离为传来的事件名 sendEvent 和一个接住该事件名对应的数据的回调函数。
代码如下：

    created(){this.$bus.$on("sendEvent",(data)=>{console.log("已接管到数据");
            this.events.push(data);
        });
    }

而后看成果：
这里咱们增加学习和听音乐，

增加胜利。

增加胜利。

到这里这个简略的小性能就实现了，大家也能够本人增加一个删除性能什么的欠缺一下，心愿本文对你立刻事件车有帮忙。

* 因为思否编译器问题局部中央“$”符号未完满编译。

退出移动版