vue中父子組件是如何相互傳遞值的？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都食品包裝袋小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站制作營(yíng)銷(xiāo)網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

父組件：vue的根實(shí)例——用new Vue()構(gòu)造函數(shù)創(chuàng)建的vue實(shí)例（實(shí)例會(huì)有一個(gè)掛載點(diǎn)，掛載點(diǎn)里的所有內(nèi)容可理解為父組件的內(nèi)容）

　　　

這里以root為掛載點(diǎn)，root里包含的所有內(nèi)容可稱為模板，即我們常說(shuō)的父組件

　　　　　

子組件：用Vue.component()注冊(cè)的組件（下圖todo-item就是組件的名稱，該名稱可自定義，推薦使用短橫線分隔命名）

　　　

定義組件名的2種方式（截圖截自vue官網(wǎng)）

　　　　

注：建議在html中引用組件時(shí)（非字符串模板），組件命名都用短橫線命名且字母全小寫(xiě)的方式

父組件向子組件傳遞值

父組件：通過(guò)屬性的形式進(jìn)行傳遞（比如v-bind:content="item"，通過(guò)v-bind屬性把item的值動(dòng)態(tài)賦給content變量）

　　　　

子組件：通過(guò)props接收父組件傳遞的值

　　　　　

子組件向父組件傳遞值

子組件：通過(guò)$emit()方法發(fā)布事件廣播

父組件：捕獲到子組件向外觸發(fā)的事件，然后可執(zhí)行相應(yīng)的方法

下圖為子組件通過(guò)$emit()方法向外傳遞delete事件，父組件捕獲到delete事件后執(zhí)行handleDelete()方法

下圖中methods方法里的this默認(rèn)指向vue實(shí)例

不要把methods方法寫(xiě)成箭頭函數(shù)，因?yàn)榧^函數(shù)會(huì)改變this的指向，使this不在默認(rèn)指向vue實(shí)例，而指向undefined

同時(shí)vue實(shí)例中的data，computed，watch屬性也都不要寫(xiě)成箭頭函數(shù)，理由同上

　　　　

注：@delete="handleDelete"為v-on:click="handleDelete"的簡(jiǎn)寫(xiě)；

:content="item"為v-bind:content="item"的簡(jiǎn)寫(xiě)

補(bǔ)充：怎么注冊(cè)全局組件和局部組件

①：注冊(cè)全局組件（用Vue.component()，組件名為todo-item，可自定義，推薦使用短橫線分隔命名）

　　　　

②：注冊(cè)局部組件（通過(guò)一個(gè) JavaScript 對(duì)象來(lái)定義組件）

　　　　　

注冊(cè)局部組件后，直接引用組件會(huì)報(bào)錯(cuò)，提示未注冊(cè)該組件

　　　　

解決方法是在vue實(shí)例中用components進(jìn)行聲明

　　　　　

關(guān)于vue中父子組件是如何相互傳遞值的問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享標(biāo)題：vue中父子組件是如何相互傳遞值的-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/dgisds.html