【VUE】2022.6.16 今日所学

一、vue中bus的使用（事件总线）

首先，在全局注册bus。（main.js）

Vue.config.productionTip = false;

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

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

然后，在要传送数据的组件内传输数据。（例如，商品页面传输数据给购物车页面）

this.$bus.$emit("hello",item.name)
//item是点击的商品，这里可以写数字先进行尝试

最后，在接受数据的组件内接收数据。

mounted() {this.$bus.$on("hello",(data)=>{
      console.log("通过bus实现兄弟组件传值，传过来点击的商品名称",data)
    })
  },

PS：

1.通过bus进行数据传输时需要注意，要绑定同一事件才能进行传输。如上所示的“hello”

2.需要考虑的情况为，当组件销毁时，bus事件仍然存在，此后进行事件绑定传输可能出现错误。例如上述例子中，假如删除了商品和购物车组件，但是“hello”事件仍然存在，此后若绑定“hello”事件，则会出现问题。

可以通过设置beforeDestory事件，用$off去解绑当前组件所用到的事件。

beforDestory(){
   this.$bus.$off("hello")
}

标签：VUE,16,bus,绑定,组件,Vue,事件,2022.6,hello
来源： https://www.cnblogs.com/TitiAndCow/p/16380858.html