考慮到Vue框架是MVVM模式的，所以牽涉到數據的問題是Vue中的核心，而組件傳值則是其中的一大重點數組

　　組件傳值分爲：父子組件傳值、兄弟組件之間傳值框架

父子組件傳值

　　Vue中把網頁拆分紅一個個小的組件，咱們能夠理解整個大網頁是父組件，而這裏面的每個小的部分（頭部、輪播圖等）都是一個個子組件函數

父組件---->子組件

　　先舉一個父子組件的簡單例子：在一個todolist中，父組件爲整個頁面，其中一個子組件爲生成的每一小項的todolist，以下ui

　　這裏，每點擊一次按鈕，input框中的內容（父組件）就須要傳入todolist並生成一條新的todolist（子組件），即父組件傳值給子組件3d

　　子組件爲了接收父組件的傳值，須要兩個操做：blog

　　1.v-bind綁定一個變量，接收父組件中傳遞過來的值，此處父組件傳遞的值在v-for中的item，這裏用content屬性接收這個item生命週期

　　2.子組件props中添加這個用來接收的屬性，以下事件

　　這樣一來，父組件就能夠向子組件傳值了，整個過程整理以下：圖片

類型檢查

　　props能夠進行類型檢查，便可以設置接收值的類型、是否必填、默認值等參數字符串

　　對類型進行的限定寫在type屬性中，若是隻容許爲一種屬性，則值寫一個數據類型，而多種屬性則把數據類型寫在一個數組中

　　類型是否必填寫在required屬性中，true爲必填，false爲選填（默認值）

　　類型的默認值寫在default屬性中，只有當沒有給該屬性傳值時用默認值，不然用傳入的值

單向數據流

　　Vue裏通常數據是從父組件傳入子組件的，而且修改/變化的是父組件的值

　　若是在子組件中修改父組件的值，會形成其餘使用父組件值的子組件的值也變化（例如傳入的是引用類型的值），這明顯是很差的

　　爲了應對這個問題，有兩種解決方法

　　1.在子組件中的data裏接收prop傳入的參數，而後修改這個data裏的參數

　　2.在子組件中用computed來修改屬性值

子組件---->父組件

　　仍是上面的todolist，咱們能夠加一個功能：添加完幾個todolist項後，經過點擊，去除掉咱們不須要的項目，可是這裏點擊的爲子組件，而子組件的數據來自於父組件，所以產生了子組件向父組件傳值的問題

　　對於這樣的狀況，處理方法以下

　　1.子組件的模板中綁定一個點擊事件，該事件寫在子組件的methods中，而後在methods中用$emit觸發一個父組件的監聽事件，並同時傳一個參數給父組件

　　2.父組件的監聽事件被觸發，執行監聽事件中的事件，該事件寫在父組件的methods中

　　3.父組件中的事件被觸發，同時接收到子組件傳入的值

　　圖片示例以下

非父子組件傳值

　　非父子組件之間的傳值再也不使用props和$emit，而是直接在Vue構造函數的原型上添加一個bus屬性，這個屬性將在後續全部的Vue實例中出現，同時這個屬性也是一個Vue實例，裏面有Vue實例的一系列方法

　　下面這個例子實現了點擊一個子組件，其餘子組件的值都變成點擊的這個組件的值，具體代碼以下：

　　執行的解釋以下：

　　1.子組件中的props接收父組件的傳值，這裏父組件傳入兩個字符串，因而這兩個字符串就被丟給了content，可是這裏考慮了單向數據流的問題，把父組件傳入的數據丟給了selfContent這個變量

　　2.點擊子組件，觸發了handleClick事件，子組件經過$emit向父組件的bus屬性（也是一個Vue實例）觸發change事件，並傳遞selfContent這個變量的值

　　3.在mounted這個生命週期中，全部該組件的bus屬性（Vue實例）監聽到了change事件，觸發函數，全部child組件中的selfContent的值都變成了以前傳入的selfContent的值，並被頁面渲染出來

　　整個執行的代碼註釋以下

　　固然非父子組件傳值也能夠用Vuex來實現（待補充，未完待續）