vue中组件传值方法

父组件给子组件传值

一、
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)=>{

})监听发射自定义事件同时接收数据