前言

使用了Vue的組件概念後
了解到組件層級關係, 組件的數據傳遞並非毫無規則
本章節會用先前所暸解的配置中達到組件的數據傳遞

父層傳遞子層：

從父層傳遞子曾組件這件事並不困難
最簡單的方式即是使用 prop傳遞數據
prop除了傳遞 data以外, method也可以作為傳遞使用

// :xxxx -> v-bind:xxxx
<text :testData="testString" :testNumber="10" :testFunction="testFuction" />

用先前學的prop配置能讓子層接受到需要的配置
只要記得要在子層用 prop接收需要的配置即可

{
	prop : ['testString', 'testNumber', 'testFunction']
}

子層傳遞父層：

1. 綁定函數：
   在尚未了解自定義事件的處理時
   父層要接收到子層的命令時, 可以使用方法回調取得
   以上面的範例來說(父層函數)：

{
	methods : {
		testFunction(value) {
			console.log(value)
		}
	}
}

在子層接受到父層帶來的函數時, 接收到的函數可以用子層的配置的 data數據帶入呼叫函數

{
	prop : ['testFunction'],
	data() {
		return {
			text : 'test'
		}
	},
	methods : {
		sendTest() {
			this.testFunction(this.text);
		}
	}
}

使用該方式可以順利的將數據帶到父層

2.使用 ref屬性：
ref屬性可以捉取到該組件標籤的 VueComponent實例對象

<test ref="testComponent" />

利用 $refs即可取得到該組件實例

console.log(this.$refs.testComponent.text)

同層間的組件傳遞：

上面說的都是子曾和父層間的溝通
若今天是子層和子層間的溝通
那其要通過中間的橋樑共同的父層
假如今天 App組件包含 A組件 和 B組件
A組件要取得 B組件的配置項
App組件要用子層傳遞父層的方式取得數據 B組件配置
再由 App組件用 prop的方式將配置帶到 A組件

App組件：

<Acomponent ref="AComponentData" />
<Bcomponent :bMethod="getAComponentData" />
//...
methods : {
    getAComponentData() {
        console.log(this.$refs.AComponentData.demo)
    }
}

A組件：

//...
data(){
    return {
        demo : 'test'
    }
}

B組件：

//...
prop : ['bMethod']
methods : {
    getAdata() {
        this.bMethod()
    }
}

上面的範例中組件的關係結構並不複雜
但為了傳遞一個簡單的數據必須經過共通的組件(App.vue)

總結：

以上的說明都是針對非常簡單的組件結構
若今天組件的層級很多那在數據的溝通配置上就會相對複雜
組件的的溝通遵守一個原則
數據的傳遞必須到共同的父層
不相關的兩個組件是不能直街取的其配置函數或是數據

下一章節會提及一個相對較有彈性的作法
讓組件傳的的方式更上一層樓