博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue---子父、父子、非父子组件通信
阅读量:2240 次
发布时间:2019-05-09

本文共 577 字,大约阅读时间需要 1 分钟。

子组件和父组件通信

  • 在父组件中使用子组件时自定义事件,设置该事件的回调函数
  • 在子组件中需要传数据给父组件时调用this.$emit触发上面自定义的事件,并且设置要发生给父组件的数据
    
Document

展示子组件的数据:{

{pMsg}}


父子组件通信

父组件可以使用props属性将值传给子组件

    
Document

非父子组件通信

有两种方法:1)使用第三方来处理,new vue();2)使用vuex 状态管理模式

下面主要讲解使用事件总线来管理

  • 发送方:
    • 通过bus.$emit触发事件,并且将数据作为参数发给接收放
    • bus.$emit(‘my-send’,val);
  • 接收方:
    • 通过bus.$on监听事件,监听时设置回调函数,当事件触发时该回调函数就要调用
    • bus.$on(‘my-send’,function(val){ console.log(‘收到了发送方的数据’,val) })
    
Document

转载地址:http://qkhbb.baihongyu.com/

你可能感兴趣的文章