Vue之父子组件通信

一、父给子传值

// 父组件
<template>
	<div>
		<child title='我是父传给子的标题'></child>
	</div>
</template>
<script>
	import child from './child';
	export default{
		components:{
			child:child
		}
	}
</script>

// 子组件
<template>
	<div>
		<p>{{title}}</p>
	</div>
</template>
<script>
	export default{
		props:{
			title:{
				type:String,
				default:''
			}
		}
	}
</script>

二、父调用子的方法

// 父组件
<template>
	<div>
		<child title='我是父传给子的标题' ref='child'></child>
		<button @click='getchildData()'>点击</button>
	</div>
</template>
<script>
	import child from './child';
	export default{
		components:{
			child:child
		},
		methods:{
			getchildData(){
				this.$refs['child'].getData();
			}
		}
	}
</script>

// 子组件
<template>
	<div>
		<p>{{title}}</p>
	</div>
</template>
<script>
	export default{
		methods:{
			getData(){
				console.log('获取数据');
			}
		}
	}
</script>

三、子调父的方法

// 父组件
<template>
	<div>
		<child title='我是父传给子的标题' @getData="fetchData"></child>
	</div>
</template>
<script>
	import child from './child';
	export default{
		components:{
			child:child
		},
		methods:{
			fetchData(){
				console.log('父组件的方法');
			}
		}
	}
</script>

// 子组件
<template>
	<div>
		<p>{{title}}</p>
		<button @click="getData()">点击</button>
	</div>
</template>
<script>
	export default{
		methods:{
			getData(){
				this.$emit('getData')
			}
		}
	}
</script>

四、兄弟之间的通信

1、建立一个空的Vue实例，将通信事件挂载到该实例上

// BusVue.js
import Vue form 'vue';
export default new Vue();

2、兄弟组件 childA.vue

<template>
	<div>
		<span> A组件：{{msg}}</span>
		<el-button @click="send">把数据传给B组件</el-button>
	</div>
</template>
<script>
	import bus from '@/components/BusVue';
	export default {
		data(){
			return{
				msg:"我是A组件的数据"
			}
		},
		methods:{
			send(){
				bus.$emit("aEvent", this.msg)
			}
		}
	}
</script>

3、兄弟组件 childB.vue

<template>
	<div>
		<span> B组件：A组件传过来的值是：{{msg}}</span>
	</div>
</template>
<script>
	import bus from '@/components/BusVue';
	export default {
		data(){
			return{
				msg:""
			}
		},
		methods:{
			send(){
				bus.$on("aEvent", (value)=>{ // 监听aEvent事件，回调函数要用箭头函数
				this.msg = value; // value就是A组件传的值
				})
			}
		}
	}
</script>

4、父组件 parent.vue

<template>
	<div>
		<childa><childa>
    	<childb></childb>
	</div>
</template>
<script>
	import childa from "./childA";
	import childb from "./childB";
	export default {
		components:{
    		childa,
    		childb
  		},
	}
</script>

到此，vue中的组件通信传值基本可以搞定了，但是对于大型复杂的项目，建议采用vuex 状态管理更适合…