vue 跨组件传参bus用法

最新推荐文章于 2022-11-30 18:28:20 发布

我叫安琪拉

最新推荐文章于 2022-11-30 18:28:20 发布

阅读量349

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hjjmdcg_/article/details/126947272

版权

bus用法

需求：切换按钮时改变全局页面的背景色

1、main.js 将bus挂载到原型上

Vue.prototype.$bus=new Vue()

2、A组件

    // Icon切换
    changeHeaderIcon (item, index, type) {
      if (index === 3) {
        this.tabHeaderName = type
        if (type == '2d') {
          this.headerIcon[3].show = false
          this.$bus.$emit('event', '2d')   //event:自己定义的
        } else if (type == '3d') {
          this.headerIcon[3].show = true
          this.$bus.$emit('event', '3d')
        }
      }
    },

3、B组件

 mounted () {
    this.$bus.$on("event", (data) => {
      // console.log("data", data)
      if (data == '2d') this.bg = "rgba(255,255,255, 0)"
      else this.bg = "url(" + require("@/assets/images/深蓝背景.png") + ")"
    })
  },