vue---子父、父子、非父子组件通信

子组件和父组件通信

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

    
    
    
    


    

        
展示子组件的数据：{{pMsg}}
        

        
    
    
    

父子组件通信

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

非父子组件通信

有两种方法：1）使用第三方来处理，new vue()；2）使用vuex 状态管理模式

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

• 发送方：
  • 通过bus.$emit触发事件，并且将数据作为参数发给接收放
  • bus.$emit('my-send',val);

• 接收方：
  • 通过bus.$on监听事件，监听时设置回调函数，当事件触发时该回调函数就要调用
  • bus.$on('my-send',function(val){ console.log('收到了发送方的数据',val) })