0
点赞
收藏
分享

微信扫一扫

vue组件兄弟组件的多次组件通信问题

东林梁 2022-01-20 阅读 164

1、因为需要进行多次传值,所以在发送方,发送过数据之后就要立即进行销毁,从而不影响下一次数据的发送,接收方在转义赋值之后,也要对接收方的自定义事件进行销毁,不妨碍接受下一次的数据 

发送方:

在发送完数据之后就进行数据的销毁

async editGoodsInfo(id) {
      this.$router.push('/editGoods')
      this.editFormId = id
      const { data: res } = await this.$http.get('goods/' + id)
      if (res.meta.status !== 200) {
        console.log(res)
        return false
      }
      // 因为需要进行多次传值,所以在发送方,发送过数据之后就要立即进行销毁,从而不影响下一次数据的发送,接收方在转义赋值之后,也要对接收方的自定义事件进行销毁,不妨碍接受下一次的数据
      bus.$emit('share', res.data)
      bus.$off('share')
    }

接收方:

        此处是将数据进行了简单的处理,在数据处理结束之后,并且已经将接收到的值转接给另一个变量的时候,就把接收方的自定义事件 'share' 移除

bus.$on('share', (dd) => {
      const newArr = []
      dd.goods_cat.split(',').forEach((item) => {
        item = parseInt(item)
        newArr.push(item)
      })
      if (newArr.length !== 3) {
        console.log('err')
        return false
      }
      dd.goods_cat = newArr
      this.addGoodsForm = dd
      bus.$off('share')
    })
  }

中转:

import Vue from 'vue'
// 新建一个实例分享出去
export default new Vue()

此处引用了一篇间的兄弟组件通信的文章,可以自行跳转观看

举报

相关推荐

0 条评论