【VUE】2022.6.16 今日所学

2022-06-16 10:04:13 阅读：148 来源： 互联网

标签：VUE 16 bus 绑定组件 Vue 事件 2022.6 hello

一、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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【VUE】2022.6.16 今日所学