父组件给子组件传值
一、
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
