前言：本文主要介紹在Vue中元件與元件如何進行資訊傳遞。分為三部分：

父元件向子元件

子元件向父元件

非父子元件通訊

一、父元件向子元件通訊（props）

①、父元件向子元件傳遞字串

<template>
    <div id="m-dialog">
        <!-- 
        該種方法“只能傳遞字串”，
        將child的data中的value = "str";不需要父元件data中有資料
        -->
        <child value="傳遞固定字串"></child>
    </div>
</template>
 

Vue.component("child", {
	// 獲取value的依賴
	props:["value"],
	template: '<span>{{ value }}</span>'
});
new Vue({
	// 這裡的el可視為父元件
	// 所以下面這個片段是放在#m-dialog裡面的
	el:"#m-dialog"
});

②、父元件向子元件傳遞資料

<div id="m-dialog">
<!-- 
將元件的資料state與父元件的資料flag繫結在了一起
執行 vue1.flag= false 會對元件資料進行重新渲染
 -->
	<child v-bind:state="flag"></child>
</div>
 

Vue.component("child", {
	// 獲取value的依賴
	props:["state"],
	template: '<span>{{ state }}</span>'
});
var vue1 = new Vue({
	// 這裡的el可視為父元件
	// 所以下面這個片段是放在#m-dialog裡面的
	el:"#m-dialog",
	data: {
		flag: true
	}
});

使用props傳遞值的時候可能有多個引數，這時候需要注意順序問題

詳情請點選

二、子元件向父元件通訊($emit())

因為父子元件的資料繫結是單向，故子元件的資料變化不會影響到父元件，故需要通過事件的監聽來主動通知父元件對應子元件的資料變化

<div id="m-dialog">
<!-- 
v-on:cancle="other"表示如果觸發元件中的cancle事件
則連帶觸發父元件中的other時間
 -->
	<child v-on:cancle="other"></child>
</div>
 

Vue.component("child", {
	template: '<button v-on:click="cancle">我是按鈕，點我觸發父元件事件</button>',
	methods: {
		cancle: function() {
			// 與父元件通訊一定要加上這句話
			this.$emit('cancle');
		}
	}
});
var vue1 = new Vue({
	// 這裡的el可視為父元件
	// 所以下面這個片段是放在#m-dialog裡面的
	el:"#m-dialog",
	data: {
		flag: true
	},
	methods: {
		other: function() {
			alert();
		}
	}
});

三、非父子元件通訊

// 建立一個空容器
var bus = new Vue()

// 在元件 B 建立的鉤子中監聽事件
// $on用於監聽事件
bus.$on('event', function (id1,id2) {
  // ...
  alert(a);// 彈出1
  alert(a);// 彈出2
})

// 觸發元件 A 中的事件
// 觸發了event事件, 後面為引數
bus.$emit('event', 1, 2);

如果是比較龐大的元件間通訊可以使用vuex,我個人建議不要為了用 Vuex 而用 Vuex，除非你的專案很大，耦合度很高，需要大量的儲存一些 data，元件之間通訊頻繁。當然還是要根據自己的業務場景的來決定，總之還是那句話，不要為了用 Vuex 而用 Vuex 友情推薦：Vue 進階教程之：非父子元件通訊方法（非Vuex） 傳送門

瞎談：剛接觸vue，學習的東西很多，如有錯誤，敬請提醒，共同進步~~