今天就跟大家聊聊有關(guān)vue中怎樣實現(xiàn)父子組件間通信，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)建站服務(wù)項目包括麥積網(wǎng)站建設(shè)、麥積網(wǎng)站制作、麥積網(wǎng)頁制作以及麥積網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，麥積網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到麥積省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

建兩個組件father.vue和child.vue作為示例的基礎(chǔ)。

//父組件

//子組件

這兩部分的代碼都很清晰明了，父組件通過import的方式導入子組件，并在components屬性中注冊，然后子組件就可以用標簽的形式嵌進父組件了。運行father.vue后的效果是這樣的：

示例效果一

1.通過prop實現(xiàn)通信

子組件的props選項能夠接收來自父組件數(shù)據(jù)。沒錯，僅僅只能接收，props是單向綁定的，即只能父組件向子組件傳遞，不能反向。而傳遞的方式也分為兩種：

（1）靜態(tài)傳遞

子組件通過props選項來聲明一個自定義的屬性，然后父組件就可以在嵌套標簽的時候，通過這個屬性往子組件傳遞數(shù)據(jù)了。

（2）動態(tài)傳遞

我們已經(jīng)知道了可以像上面那樣給 props 傳入一個靜態(tài)的值，但是我們更多的情況需要動態(tài)的數(shù)據(jù)。這時候就可以用 v-bind 來實現(xiàn)。通過v-bind綁定props的自定義的屬性，傳遞去過的就不是靜態(tài)的字符串了，它可以是一個表達式、布爾值、對象等等任何類型的值。

出來的效果是這樣的：

示例效果二

2.通過$ref 實現(xiàn)通信

對于ref官方的解釋是：ref 是被用來給元素或子組件注冊引用信息的。引用信息將會注冊在父組件的 $refs 對象上。

看不懂對吧？很正常，我也看不懂。那應(yīng)該怎么理解？看看我的解釋：

1. 如果ref用在子組件上，指向的是組件實例，可以理解為對子組件的索引，通過$ref可能獲取到在子組件里定義的屬性和方法。

2. 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通過$ref可能獲取到該DOM 的屬性集合，輕松訪問到DOM元素，作用與JQ選擇器類似。

那如何通過$ref 實現(xiàn)通信？下面我將上面prop實現(xiàn)的功能，用$ref實現(xiàn)一遍：

從上面的代碼我們可以發(fā)現(xiàn)，通過ref=‘msg'可以將子組件child的實例指給$ref，并且通過.msg.getMessage（）調(diào)用到子組件的getMessage方法，將參數(shù)傳遞給子組件。下面是“ console.log( this.$refs.msg);”打印出來的內(nèi)容，這可以讓大家更加了解，究竟通過ref我們獲取了什么：

console.log

最后的效果是這樣的：

示例效果三

這里再補充一點就是，prop和$ref之間的區(qū)別：

1. prop 著重于數(shù)據(jù)的傳遞，它并不能調(diào)用子組件里的屬性和方法。像創(chuàng)建文章組件時，自定義標題和內(nèi)容這樣的使用場景，最適合使用prop。

2. $ref 著重于索引，主要用來調(diào)用子組件里的屬性和方法，其實并不擅長數(shù)據(jù)傳遞。而且ref用在dom元素的時候，能使到選擇器的作用，這個功能比作為索引更常有用到。

3.通過$emit 實現(xiàn)通信

上面兩種示例主要都是父組件向子組件通信，而通過$emit 實現(xiàn)子組件向父組件通信。

對于$emit官網(wǎng)上也是解釋得很朦朧，我按我自己的理解是這樣的:

vm.$emit( event, arg )

$emit 綁定一個自定義事件event，當這個這個語句被執(zhí)行到的時候，就會將參數(shù)arg傳遞給父組件，父組件通過@event監(jiān)聽并接收參數(shù)。

看完上述內(nèi)容，你們對vue中怎樣實現(xiàn)父子組件間通信有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。