父组件给子组件传值

一、
      1.在子组件标签中写入父组件传递数据 向下传递prop
      2.在子组件内声明props选项接收父组件传递的数据 props:['','','']

父组件：

<Header :msg='msg' ></Header>

子组件：

props:['msg'],

二、
      provide inject
      1.父组件使用provide提供传递数据或者方法
      2.子组件使用inject注入传递的数据或者方法

父组件：

provide(){return {parent:this.parent,parentSend:this.parentSend,attr:this.attr}}

子组件：

inject:['parent','parentSend'],

三、
      事件总线 $emit 和 $on vue实例调用方法 
      1.新建event.js 
        import Vue from 'vue';
        export default new Vue();
      2.在父组件中使用$emit发射自定义事件同时传递参数
      import Bus from './event.js'
      Bus.$emit('自定义事件名称',传递数据)
      3.在子组件内部使用$on监听自定义事件同时接收参数
      Bus.$on('自定义事件名称',(a,b)=>{

      })

父组件：

import Bus from './event'Bus.$emit('toHeader',this.pMsg,'hello world')

子组件：

import Bus from '../event'Bus.$on('toHeader',(a,b)=>{console.log(a,b);this.a = a;this.b = b;})

子组件给父组件传值

1.发射自定义事件给父组件同时传递数据
      this.$emit('toParent',this.footer);
      2.在父组件模板中(在子组件标签上)声明自定义事件 
      <Footer @toParent='事件处理程序'></Footer>
      事件处理程序(接收子组件传递的数据){

      }

兄弟组件传值

利用事件总线 
    1.定义事件总线 新建xxx.js
        import Vue from 'vue';
        export default new Vue();
    2.在一个兄弟组件中引入事件总线 
      import Bus from './event.js'
      使用Bus.$emit('自定义事件名称',传递的数据)
    3.在另一个兄弟组件中引入事件总线
      import Bus from './event.js'
      使用Bus.$on('emit发射自定义事件名称',(a,b)=>{
        
      })监听发射自定义事件 同时接收数据
    

祖先后代组件传值/通信

provide inject