vue組件的那點事

當前前端估計沒有不知道vue這個漸進式框架，因爲它容易上手，支持各類類庫，各類優勢，成爲咱們開發單頁應用的一個不二之選。下面是我在學習和工做中對組件之間通訊和交互方式的概括，但願對你有所幫助。

父子組件交互

prop（父——>子）

父親想跟兒子說一句：回來吃飯了。咱們能夠這麼作~~

首先簡單建立兩個組件一個叫father.vue一個叫child.vue，而後父組件father.vue在頁面中引用自組建child.vue格式以下：

而後回到需求自己父親要跟兒子說回來吃飯了。也就是父組件要向子組件傳遞一個信息。能夠選擇prop。簡單的來講Prop 是你能夠在組件上註冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。直觀的解釋就是：自定義的特性能夠在對應使用的那個組件上的props屬性獲取到

至此咱們就實現了父組件與子組件的通訊。但值的注意有幾點：

因爲HTML屬性對大小寫並不敏感，因此你的自定義屬性不能使用大寫字母，若是使用可能會致使沒法識別
若是你只是想單純的傳遞一個字符串格式的數據，能夠不使用（v-bind:自定義屬性名）的寫法。而是直接（屬性名=值）

$emit（子——>父）

上面中的場景中提到了父親叫兒子回來吃飯，可是兒子正在玩遊戲須要20分鐘以後才能回來，這個時候兒子要告訴父親說：我在玩遊戲，20分鐘以後就回來。咱們能夠這麼作~~

使用$emit進行組件通訊的方式就像是咱們常說的發佈訂閱，這裏子組件要說的話這一行爲就是發佈，父組件訂閱這個事件來得到發佈者發佈的信息。

至此咱們就實現了子組件與父組件的通訊。但值的注意有幾點： @childtosay的寫法是v-on:childtosay的簡寫，監聽/訂閱這個方法的意思。
發佈和訂閱的方法名稱必須統一，且不能有大寫字母，若是名字過長可使用短橫線在多個單詞中鏈接

slot（父——>子）

父親等了半個小時，兒子纔回來，有點生氣。準備跟兒子約法三章：1.天天晚上七點以前必須回來吃飯。2.出去玩以前要徵得老爸贊成。3.不能離家太遠，在附近玩。咱們能夠這麼作~~

如今的需求是咱們須要向子組件傳遞多條數據，可能這些數據在頁面顯示的時候還要有必定的樣式。那麼prop的通訊方式就不太適用了。這個時候插槽的功能就顯得尤其重要了。

固然了若是多個插槽，位置順序有明顯變化的，你能夠給它們起一個名字來具體區分：

//father.vue
<child>
<p  class="red"  slot="rouss">天天晚上七點以前必須回來吃飯。</p>
<p  class="red"  slot="rous">出去玩以前要徵得老爸贊成</p>
<p  class="red"  slot="rou">不能離家太遠，在附近玩</p>
</child>
複製代碼

//child.vue
<div>
<h5>我是兒子</h5>第1條：
<slot  name="rou"></slot>第2條：
<slot  name="rous"></slot>第3條：
<slot  name="rouss"></slot>
</div>
複製代碼

這樣也就確保了多個插槽的位置

$parent（子——>父）

若是父親口袋中有兒子的試卷，可是成績只有59分，兒子不想被罵，要偷偷改掉試卷的分數，能夠嘗試這麼作~~

老師從小教育咱們作人要誠實，因此兒子這樣的行爲是堅定不可取的，一樣的咱們在vue的使用中也不推薦這樣修改父組件的data數據。

$ref(父——>子)

和$parent相似的還有$ref，它可讓你在父組件中訪問子組件的屬性和值，用法以下：

EventBus （父子，兄弟之間都適用）

爸爸和兒子都想看電視，可是遙控器放在誰的手裏另一方都不一樣意，這個時候家裏的實際掌權者母親大人就說：遙控器給我，大家誰要看什麼節目跟我說，我給大家安排。這裏面母親大人的角色就是EventBus

EventBus 就是在聲明一個vue的實例對象，全部公共的方法和屬性均可以放在這個實例上面，這樣父子組件就均可以進行訪問了，可是若是是大型項目，仍是推薦使用vuex

vuex（父子，兄弟之間都適用）

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式，用法不少，小弟就不在這裏獻醜了。

寫在最後：小弟學藝不精，水平有限，上面的內容是我對vue的一個簡單理解，但願對你有所幫助，固然若是你發現哪裏有問題，請及時指正，不勝感激。