前言 在 Vue 項(xiàng)目中父子組件的通信是非常常見(jiàn)的，最近做項(xiàng)目的時(shí)候發(fā)現(xiàn)對(duì)這方面的知識(shí)還不怎么熟練，在這邊做一下筆記，系統(tǒng)學(xué)習(xí)一下吧。

1 父組件傳值給子組件

1.1 傳值寫(xiě)法

父組件傳值給子組件，這個(gè)就比較常見(jiàn)了，直接用 props 就可以了。但是就算是 props 子組件那邊也有三種寫(xiě)法，如下面代碼所示：
父組件

```<!-- 兩種情況 --> <!--靜態(tài)傳值--> <child name="xhm"></child> <!--動(dòng)態(tài)傳值--> <child :name="userName"></child> ```

子組件

// 1 簡(jiǎn)單粗暴就給個(gè)名稱(chēng)的情況 props:['name'], // 2 給個(gè)名稱(chēng)順便指定個(gè)類(lèi)型，如果父組件傳遞過(guò)來(lái)的值類(lèi)型不對(duì)的話就會(huì)報(bào)錯(cuò) props:{name:String }, // 3 給個(gè)名稱(chēng)不僅指定了類(lèi)型，還順便送了個(gè)默認(rèn)值,當(dāng)父組件傳個(gè)空過(guò)來(lái)或者啥都沒(méi)傳過(guò)來(lái)的時(shí)候就用默認(rèn)值了 props: {name: {type: String,default: 'xhm',} },

注意一下的話，如果是數(shù)組或者是對(duì)象要默認(rèn)值的話，直接設(shè)置默認(rèn)數(shù)組或者默認(rèn)對(duì)象會(huì)報(bào)錯(cuò)，需要用工廠函數(shù)返回，如下：

props: {arr:{type:Array,default:()=&gt;{return [1,2,3]}} }, // 對(duì)象也是和上面一個(gè)用工廠函數(shù)

1.2 子組件使用父組件的值

由于單向數(shù)據(jù)流的限制，我們不能直接在子組件中修改 props 的值，當(dāng)我們修改的時(shí)候會(huì)報(bào)錯(cuò),官方的說(shuō)法是：

所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

額外的，每次父級(jí)組件發(fā)生更新時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。

所以啊，如果你不只是想在子組件中簡(jiǎn)單的渲染父組件傳過(guò)來(lái)的值的話，那么可以用下面的兩種方法。

這個(gè) prop 用來(lái)傳遞一個(gè)初始值；這個(gè)子組件接下來(lái)希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來(lái)使用。在這種情況下，最好定義一個(gè)本地的 data 屬性并將這個(gè) prop 用作其初始值：

props: ['name'], data() {return {userName:this.name,}; },

這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下，最好使用這個(gè) prop 的值來(lái)定義一個(gè)計(jì)算屬性：

props: ['name'], computed: {userName(){return this.firstName + this.name} },

2 子組件傳值給父組件

雖然我們說(shuō)是要單向數(shù)據(jù)流，但是很多時(shí)候，我們?cè)谧咏M件改變了某些值之后，還是要反饋給父組件，讓父組件做一下修改，那么這個(gè)時(shí)候就要想著子組件向父組件傳值啦。有下面這么兩種方式

2.1 emit 方法

這個(gè)基本都是用 emit 來(lái)傳遞了，用法直接看代碼吧：
子組件

// props:['name]// methods 里 update(){this.$emit('update','ljy');// 第一個(gè)參數(shù)：事件名，第二個(gè)參數(shù)：傳遞給事件方法的參數(shù) }

父組件

/* template 里面的代碼，監(jiān)聽(tīng)子組件里面的 update 事件，調(diào)用父組件的 childUpdate 方法&lt;child :name="userName" @update="childUpdate"&gt;&lt;/child&gt;*/ // methods chidlUpdate(val){// val 參數(shù)就是子組件傳遞過(guò)來(lái)的數(shù)據(jù)this.userName = val; }

雖然這樣是可以實(shí)現(xiàn)子組件向父組件傳值，但是寫(xiě)多一個(gè)方法感覺(jué)很煩，所以 vue 官方高出了一個(gè) 以 update:myPropName 的模式觸發(fā)事件。，這個(gè)是啥，舉個(gè)例子，我們的子組件中有一個(gè) name 的 props，我們用下面這個(gè)形式通知父組件

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

然后父組件可以監(jiān)聽(tīng)那個(gè)事件并根據(jù)需要更新一個(gè)本地的數(shù)據(jù)屬性:

```<child :name="userName" @update:name="userName = $event"></child> ```

這樣當(dāng)我們?cè)谧咏M件觸發(fā)那個(gè)修改的方法的時(shí)候，父組件的 userName 變量就會(huì)更新為 newName了，然后為了方便起見(jiàn)，官方提供了一個(gè)縮寫(xiě)，即 .sync 修飾符。看代碼吧：

```<child :name.sync="userName"></child> ```

上面的代碼和前面的代碼是一個(gè)效果，是不是方便了很多。舒服了吧。

2.2 利用淺拷貝（不推薦）

這個(gè)的話是針對(duì)于 對(duì)象和數(shù)組那些引用類(lèi)型的數(shù)據(jù)而言的，由于這些存在淺拷貝的問(wèn)題（不明白淺拷貝的看這篇文章），所以可以利用這點(diǎn)來(lái)實(shí)現(xiàn)子父組件的「同生共死」，看代碼吧

// 假設(shè) name 是一個(gè)對(duì)象或者數(shù)組 props:['name'], return {userName:this.name, };

就這樣？！

沒(méi)錯(cuò)就是這么簡(jiǎn)單粗暴，由于淺拷貝的問(wèn)題，我們?cè)谧咏M件修改 userName 的時(shí)候，從父組件傳遞過(guò)來(lái)的那個(gè)值也會(huì)改變的，然后就會(huì)實(shí)現(xiàn) props 的「雙向綁定」了。但是一般沒(méi)人會(huì)這么干，因?yàn)檫@樣會(huì)造成維護(hù)上的問(wèn)題，會(huì)讓人覺(jué)得咋沒(méi)干啥父組件的值咋就變了，會(huì)讓人頭禿啊，所以除非你項(xiàng)目中非得要搞這么一個(gè)子父組件 props 的「同生共死」，那就這么干吧。

3 子組件調(diào)用父組件的方法

不知道這樣的叫法對(duì)不對(duì)，反正就這樣啦。總結(jié)之后又下面這幾種方法

3.1 emit

其實(shí)本來(lái) emit 就是用于子組件向父組件通信的，上面的子組件傳值給父組件其實(shí)也就是父組件監(jiān)聽(tīng)子組件的事件，然后觸發(fā)父組件的方法的，換個(gè)說(shuō)法，也就是子組件調(diào)用了父組件的方法，再寫(xiě)一下代碼吧：

子組件

// methods 里 update(){this.$emit('update','ljy');// 第一個(gè)參數(shù)：事件名，第二個(gè)參數(shù)：傳遞給事件方法的參數(shù) }

父組件

/* template 里面的代碼，監(jiān)聽(tīng)子組件里面的 update 事件，調(diào)用父組件的 childUpdate 方法&lt;child :name="userName" @update="childUpdate"&gt;&lt;/child&gt;*/ // methods chidlUpdate(val){// val 參數(shù)就是子組件傳遞過(guò)來(lái)的數(shù)據(jù)this.userName = val; }

上面的代碼中，從某種意義上來(lái)說(shuō)，就是子組件調(diào)用了父組件的 childUpdate 方法。

3.2 this.$paarent.event

這個(gè)就比較簡(jiǎn)單了，我們假設(shè)我們?cè)诟附M件定義了一個(gè) fatherMethod() 方法，然后我們子組件就可以通過(guò)下面的代碼實(shí)現(xiàn)調(diào)用 fatherMethod() 的方法

childClick(){this.$parent.fatherMethod(); }

3.3 props

props 能傳遞 Function 類(lèi)型的數(shù)據(jù)，所以，我們通過(guò) props 當(dāng)然也是可以直接的調(diào)用父組件傳遞過(guò)來(lái)的方法啦。不多說(shuō)，直接擼代碼：
父組件

```<!-- 假設(shè)父組件里定義了一個(gè) fatherMethod() 方法 --> <child :fatherMethod="fatherMethod"></child> ```

子組件

props: {fatherMethod: {type: Function,default: null} }, methods: {childClick() {this.fatherMethod();} },

這樣我們也是調(diào)用了父組件的方法啦。

4 父組件調(diào)用子組件的方法

這個(gè)，暫時(shí)沒(méi)有遇到過(guò)這種情況，不過(guò)以備不時(shí)之需，也寫(xiě)一下吧。父組件調(diào)用子組件的方法的話是利用 ref 獲取到子組件實(shí)例，從而調(diào)用子組件的方法，假設(shè)我們子組件有這么一個(gè) childMethod() 方法。那么我們的父組件就可以這么來(lái)調(diào)用子組件的方法了

/* &lt;child ref="con"&gt;&lt;/child&gt; 子組件 */methods: {update() {this.$refs.con.childMethod();}, }

至此，關(guān)于父子組件通信的的話題就聊到這邊了，如果有啥錯(cuò)誤或者遺漏的，歡迎在下面斧正啦。

原文地址：https://segmentfault.com/a/1190000017346476

總結(jié)

以上是生活随笔為你收集整理的Vue 父子组件间的通信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。