整理vue组件间传值方法（父子组件、兄弟组件）

重新整理记录一下vue组件间传值的方法，包括父传子、子传父、兄弟间互传。

1.父组件向子组件传值

• 父组件通过自定义属性向子组件传值

<Children :toChildren="rowData"></Children>

export default{
	data(){
		return{
			rowData: false
		}
	}
}

• 子组件自定义一个属性接收值

export default{
	props: {
		toChildren: {
			type: Boolean,
			default: false
		}
	}
}

注意：由父组件传过来的 toChildren，在子组件中不能更改

2.子组件向父组件传值

• 子组件定义一个事件传值

methods: {
	handle(){
		this.$emit('to-parent', this.rowData);
	}
}

• 父组件通过自定义事件绑定一个方法来接收值

<Children @to-parent="getChildData($event)"></Children>

methods: {
	getChildData(data){
		this.getData = data; //把值赋给了getData，就可以使用了
	}
}

3.组件间传值

• 新建一个js文件作为组件间传值的中转站，命名为bus.js

import Vue from 'vue';
export default new Vue;

• 组件1 先传值到bus

import bus from '../../../libs/bus'; //记得先引入bus

methods: {
	datatoBrother(){
		bus.$emit('toBrother', this.rowData);
	}
}

• 组件2 从bus接收值

import bus from '../../../libs/bus'; //记得先引入bus

methods: {
	getBrotherData(){
		bus.$on('toBrother', (data)=>{
			this.getData = data; //把值赋给了getData，就可以使用了
		});
	}
}