Vue子组件与父组件传值方式以及它们之间调用彼此的方法

1、父组件向子组件传值：
子组件通过props获取父组件传来的值

//父组件main.vue
<template>
	<div>
		<child :data="message"></child>
	</div>
</template>
<script>
data(){
return{
message:'你好'
}
</script>

//子组件child.vue通过props获取父组件传来的值
<template>
	<div>
		<child :data="message"></child>
	</div>
</template>
<script>
data(){
return{
}，
props:{
	data:{
		type:'指定传入的类型'，
		default:'设置默认值，如果父组件没有传值，则使用这个默认值'
	}
}
</script>

2、子组件向父组件传值：
子组件通过$emit方法传递数据

//父组件main.vue
<template>
	<div>
		<child @handleEven='parentEvent(子组件触发父组件parentEvent方法)'></child>
	</div>
</template>
<script>
methods:{
	parentEvent(data){
		console.log("子组件传来的数据为："+data);
	}
}
</script>

//子组件child.vue通过props获取父组件传来的值
<template>
	<div>
		<span @click="sendData">子组件传值给父组件</span>
	</div>
</template>
<script>
methods:{
	sendData(){
	this.$emit("handleEvent(自定义的方法)","传递的数据")
	}
}
</script>

3、兄弟组件之间传值：

1. 子传父，父传子
2. vuex状态管理（集中式的存储管理）
3. 创建一个Bus.js文件，子组件和父组件都引入该文件

Bus.js:
import Vue from 'vue'
export default new Vue();

一个子组件oneChild.vue
import Bus from '@/Bus'
methods:{
	change(data){
		Bus.$emit('data',data);
	}
}

另一个兄弟子组件otherChild.vue
import Bus from '@/Bus'
created(){
	Bus.$on('data',(data)=>{
		//data传过来的值
		
	})
}
beforeDestroy(){
	Bus.$off('data')
}

三、父组件调用子组件的方法

在父组件里调用的子组件上，自定义一个ref属性名，如

//父组件
<child ref='child'></child>
//child是子组件

在子组件定义一个方法childmethod(),父组件通过this.$refs.child.childmethod();
来获取子组件的方法。

三、子组件调用父组件的方法

（1）、使用 $emit 触发一个父组件的事件方法，父组件监听该事件， $emit还可以携带参数，并通过子组件传过来的值，作相应的修改。

父组件：
<child @father='fatherMethod'></child>

methods:{
	fatherMethod(){
		console.log('父组件响应')
	}
}

子组件child:
methods:{
	childMethod(){
		this.$emit('father')
	}
}

(2)通过props进行传递

father:
<child @fathermethod='fathermethod'></child>

methods:{
	fathermethod(){
		console.log('father')
	}
}

child:
export default{
	props:{
		fathermethod:{
			type:Function,
			default:null
		}
	},
	methods:{
		childMethod(){
			this.fathermethod();
		}
	}

(3)直接通过this.$parent.事件名（父组件的方法名）