vue組件通信。prop，ref,emit的用法與區別

前言

        相信對於很多vue初學者來說，看到組件通信這塊的時候，跟我一樣懵逼，完全摸不清啥是啥，搞到最后，連父子組件都區分不清了。

        下面這篇文章就是我對vue父子組件通信的研究，寫的比較啰嗦，但是，對於一個初學者來說，不啰嗦一點，下次忘記了在看，可能又看不懂了。        

一、prop、ref、emit的區別

        我這邊對以上三點的區別做一些我自己理解上的區別，用到的語言可能不專業，但是比較通俗易懂。

        prop:父組件向子組件傳值，着重於傳遞數據，不能調用子組件的方法

        ref:父組件向子組件傳值，主要調用子組件的屬性方法，不擅長數據傳遞

        emit:子組件向父組件傳值

二、具體使用方法

1.prop

        官方文檔

        所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態，從而導致你的應用的數據流向難以理解。

        額外的，每次父級組件發生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。

        注意在 JavaScript 中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的 prop 來說，在子組件中改變變更這個對象或數組本身將會影響到父組件的狀態。

參考地址

 參考地址

 

2.ref

官方地址

官方地址

官方地址

3.emit

官方地址

$emit來觸發一個事件，第一個參數：事件名稱；第二個參數：可攜帶的一些參數。

在組件的父級可以通過事件綁定的方式，來接收觸發事件

vm.$emit( event, arg )---event：事件名，arg:參數

---

總結

      總的來說，組件的通信方法就以上幾點，看懂的話，寫項目應該就沒什么大問題了