首页 计算机科学 前端 杂谈

# 日常小记

# 1.vue 全局事件

在 main.js 中 beforecreate 钩子中添加

1
2
3
beforeCreate() {
  Vue.prototype.$bus=this
  },

如上就添加了全局事件，以学生和学校兄弟组件为例，学校需要调用学生的数据时，可以绑定事件

# School.vue

1
2
3
4
5
mounted(){
    this.$bus.$on("demo",(data)=>{
        console.log("我是学校组件，我收到了学生姓名，是："+data);
    })
},

# Student.vue

1
2
3
4
5
methods:{
   sendStudentName(){
     this.$bus.$emit("demo",this.id)
   }
 },

如此就实现了兄弟组件之间的传值，同时不要忘了在 School 组件中解绑事件

1
2
3
beforeDestory(){
    this.$bus.$off("demo");
}

# 2.pubsub 实现全局调用

首先，需要导入 pubsub 的包，注意是 pubsub-js

1
npm i pubsub-js

使用方式与全局事件类似，这里不再过多赘述

School.vue