vue組件通信

一、父子組件通信

1. 父組件內引用子組件,並在子組件添加一個屬性：

// =====父組件========
<div id="app">
	<child :msg='msg'></child>
</div>
<script>
	export default {
		data(){
			msg:'父組件數據'
		}
	}
</script>

//=======子組件========
<script>
	export default {
		props:['msg']
	}
</script>
// 此時可以在子組件中隨意使用msg這個數據

1. 父組件通過調用子組件內部方法來傳遞數據,給子組件添加ref屬性

// =====父組件========
<div id="app">
   <child ref="child"></child>
</div>
<script>
   export default {
   	methods:{
   		useChild(){
   			this.$refs.child.<方法名>
   		}
   	}
   }
</script>

此時父組件可以調用子組件內部的方法，子組件內部方法怎麼寫，看你個人需求了。

3. 子組件向父組件傳遞數據，通過子組件向父組件發射方法的形式 $emit

// ======子組件======
<template>
	<div class="child">
		<button @click="sendToParent">send</button>
	</div>
</template>
<script>
	export default {
		methods:{
			send(){
				this.$emit('listen','this is message')
			}
		}
	}
</script>
// ========父組件=======
<template>
	<child @listen="getMsgChild"></child>
</template>
<script>
	export default {
		methods:{
			getMsgChild(data){
				console.log(data) // data即爲子組件傳遞過來的數據
			}
		}
	}
</script>

二、兄弟組件之間傳遞數據

兄弟組件之間傳遞數據 要使用到$on和 $emit 兩個函數。

**重點**：兄弟之間傳遞數據，需要使用同一個vue實例。此處我採用的是生成一個空的vue實例 ，作爲中轉站。你也可以採用使用相同的父組件的形式來作爲中轉站

1. $ on: vm.$on('要監聽的函數名',function(data){})
2. $ emit : vm.$emit('要觸發的函數名','額外的參數「Object」、「String」等等')

1，新建一個空的vue實例，並在需要傳遞數據的兩個兄弟組件內都引入

// eventBus.js
import Vue from 'vue'
export default new Vue();

2，首先在觸發函數的組件內 ，使用$emit()來觸發函數

<script>
	import EventBus from '../eventBus.js'
	export default{
		data(){
			return {
				msg:'child'
			}
		},
		methods:{
			send(){
				EventBus.$emit('listen','this is message' + Math.random())
			}
		}
	}
</script>

3，在需要結束數據的另一個兄弟組件內使用$on進行監聽函數

<script>
	import EventBus from '../eventBus.js'
	export default{
		data(){
			return {
				msg:''
			}
		},
		mounted:function(){
			let self = this;
			EventBus.$on('listen',function(data){
				self.msg = data
			})
		}
	}
</script>

此時 ，兄弟組件之間傳遞數據，已經完成。