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的一個簡單理解，希望對你有所幫助，當然如果你發現哪裡有問題，請及時指正，不勝感激。