Vue 父子元件間的通訊

前言在 vue 專案中父子元件的通訊是非常常見的，最近做專案的時候發現對這方面的知識還不怎麼熟練，在這邊做一下筆記，系統學習一下吧。

父元件傳值給子元件，這個就比較常見了，直接用 props 就可以了。但是就算是 props 子元件那邊也有三種寫法，如下面**所示：

父元件 ```

```

子元件

// 1 簡單粗暴就給個名稱的情況 props:['name'], // 2 給個名稱順便指定個型別，如果父元件傳遞過來的值型別不對的話就會報錯 props:, // 3 給個名稱不僅指定了型別，還順便送了個預設值,當父元件傳個空過來或者啥都沒傳過來的時候就用預設值了 props:

},

注意一下的話，如果是陣列或者是物件要預設值的話，直接設定預設陣列或者預設物件會報錯，需要用工廠函式返回，如下：

props: 
}},// 物件也是和上面乙個用工廠函式

由於單向資料流的限制，我們不能直接在子元件中修改 props 的值，當我們修改的時候會報錯,官方的說法是：

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

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

所以啊，如果你不只是想在子元件中簡單的渲染父元件傳過來的值的話，那麼可以用下面的兩種方法。

這個 prop 用來傳遞乙個初始值；這個子元件接下來希望將其作為乙個本地的 prop 資料來使用。在這種情況下，最好定義乙個本地的 data 屬性並將這個 prop 用作其初始值：

props: ['name'],
data() ;
},

這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義乙個計算屬性：

props: ['name'],
computed: 
},

雖然我們說是要單向資料流，但是很多時候，我們在子元件改變了某些值之後，還是要反饋給父元件，讓父元件做一下修改，那麼這個時候就要想著子元件向父元件傳值啦。有下面這麼兩種方式

這個基本都是用 emit 來傳遞了，用法直接看**吧：

子元件

// props:['name]
// methods 裡
update()

父元件

/* template 裡面的**，監聽子元件裡面的 update 事件，呼叫父元件的 childupdate 方法 */ // methods

chidlupdate(val)

雖然這樣是可以實現子元件向父元件傳值，但是寫多乙個方法感覺很煩，所以 vue 官方高出了乙個以 update:mypropname 的模式觸發事件。，這個是啥，舉個例子，我們的子元件中有乙個name的 props，我們用下面這個形式通知父元件

this.$emit('update:name', newname)
// this.$emit('update:props中的變數名', 新的值)

然後父元件可以監聽那個事件並根據需要更新乙個本地的資料屬性:

``` ```

這樣當我們在子元件觸發那個修改的方法的時候，父元件的username變數就會更新為newname了，然後為了方便起見，官方提供了乙個縮寫，即.sync修飾符。看**吧：

``` ```

上面的**和前面的**是乙個效果，是不是方便了很多。舒服了吧。

這個的話是針對於物件和陣列那些引用型別的資料而言的，由於這些存在淺拷貝的問題（不明白淺拷貝的看這篇文章），所以可以利用這點來實現子父元件的「同生共死」，看**吧

// 假設 name 是乙個物件或者陣列
props:['name'],
return ;

就這樣？！

沒錯就是這麼簡單粗暴，由於淺拷貝的問題，我們在子元件修改username的時候，從父元件傳遞過來的那個值也會改變的，然後就會實現 props 的「雙向繫結」了。但是一般沒人會這麼幹，因為這樣會造成維護上的問題，會讓人覺得咋沒幹啥父元件的值咋就變了，會讓人頭禿啊，所以除非你專案中非得要搞這麼乙個子父元件 props 的「同生共死」，那就這麼幹吧。

不知道這樣的叫法對不對，反正就這樣啦。總結之後又下面這幾種方法

其實本來 emit 就是用於子元件向父元件通訊的，上面的子元件傳值給父元件其實也就是父元件監聽子元件的事件，然後觸發父元件的方法的，換個說法，也就是子元件呼叫了父元件的方法，再寫一下**吧：

子元件

// methods 裡
update()

父元件

/* template 裡面的**，監聽子元件裡面的 update 事件，呼叫父元件的 childupdate 方法 */ // methods

chidlupdate(val)

上面的**中，從某種意義上來說，就是子元件呼叫了父元件的childupdate方法。

這個就比較簡單了，我們假設我們在父元件定義了乙個fathermethod()方法，然後我們子元件就可以通過下面的**實現呼叫fathermethod()的方法

childclick()

props 能傳遞 function 型別的資料，所以，我們通過 props 當然也是可以直接的呼叫父元件傳遞過來的方法啦。不多說，直接擼**：

父元件 ``` ```

子元件

props: 
},methods: 
},

這樣我們也是呼叫了父元件的方法啦。

這個，暫時沒有遇到過這種情況，不過以備不時之需，也寫一下吧。父元件呼叫子元件的方法的話是利用 ref 獲取到子元件例項，從而呼叫子元件的方法，假設我們子元件有這麼乙個childmethod()方法。那麼我們的父元件就可以這麼來呼叫子元件的方法了

/*  子元件 */
methods: ,
}

至此，關於父子元件通訊的的話題就聊到這邊了，如果有啥錯誤或者遺漏的，歡迎在下面斧正啦。

Vue 父子元件間的通訊

Vue 父子元件間的通訊

vue元件父子間通訊02

Vue元件父子間通訊01

Vue 父子元件間的通訊

Vue 父子元件間的通訊

vue元件父子間通訊02

Vue元件父子間通訊01

相關推薦