Vue事件车，非父子组件通讯$bus,$event,中央事件总线
【摘要】 一般项目不大就利用事件车，公共的Vue实例进行传递数据一共有两种写事件车的方式，下面一一介绍 利用$emit发射自定义事件和 $on监听自定义事件 $off销毁事件一、第一种方式 （创建公共文件）src文件夹下建立公共文件// 建立公共的js文件（事件车），主要用来传递信息// 引入vue.jsimport Vue from 'vue';// 创建空的vue实例var event ...
一般项目不大就利用事件车，公共的Vue实例进行传递数据
一共有两种写事件车的方式，下面一一介绍
- 利用$emit发射自定义事件和 $on监听自定义事件
- $off销毁事件
一、第一种方式 （创建公共文件）
src文件夹下建立公共文件
// 建立公共的js文件（事件车），主要用来传递信息
// 引入vue.js
import Vue from 'vue';
// 创建空的vue实例
var event = new Vue();
export default event;
home.vue文件
<template>
<div id="home">
<h2>这是首页</h2>
<h3>{{list}}</h3>
<h5>{{mymsg}}</h5>
<button @click="biu">发射</button>
</div>
</template>
<script>
// 在需要传递信息的地方引入
import bus from '../eventBus.js'
export default{
data(){
return{
list:['少欲音','正太音','大叔音'],
mymsg:''
}
},
methods: {
biu(){
// 发射一个自定义事件，用来传递信息
console.log(bus);
bus.$emit('biulist',this.list)
}
},
mounted() {// 组件挂载时触发的钩子函数
// 接收信息
bus.$on('msg',val =>{
this.mymsg = val
})
},
}
</script>
prodct.vue与首页毫无关联的页面
<template>
<div id="product">
<h2>这是商品页</h2>
<ul v-for="val in item">
<li>{{val}}</li>
</ul>
<button @click="fn">点击发射</button>
</div>
</template>
<script>
// 在需要传递数据的地方引入
import bus from '../eventBus.js'
export default{
data() {
return {
item:null
}
},
methods: {
fn(){
bus.$emit('msg','这是商品页传来的数据')
}
},
mounted() {
// 接收信息
bus.$on('biulist',val =>{
this.item = val
})
},
}
</script>二、第二种方式直接挂载到原型
在main.js中定义一个新的对象并挂载到vue原型上
Vue.prototype.$bus=new Vue();home页
methods: {
msg() {
//$emit发送数据携带数据
this.$bus.$emit("A", {
name: "张三",
age: 20
});
}
}prodct.vue与首页毫无关联的页面
mounted() {
//$on监听接收数据，这里注意一般写在mounted，计算属性里
this.$bus.$on("A", function(res) {
console.log(res);
});
}
最后
如果对您有帮助，希望能给个👍评论收藏三连！
想跟博主交朋友的可以关注下🌹，有问题评论留言。
博主为人老实，无偿解答问题哦❤
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）