建站
咨詢
售后
建站咨詢
新聞中心
vue中父子組件是如何相互傳遞值的？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),廣昌企業(yè)網(wǎng)站建設(shè),廣昌品牌網(wǎng)站建設(shè),網(wǎng)站定制,廣昌網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,廣昌網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
父組件：vue的根實(shí)例——用new Vue()構(gòu)造函數(shù)創(chuàng)建的vue實(shí)例（實(shí)例會有一個掛載點(diǎn)，掛載點(diǎn)里的所有內(nèi)容可理解為父組件的內(nèi)容）
這里以root為掛載點(diǎn)，root里包含的所有內(nèi)容可稱為模板，即我們常說的父組件
子組件：用Vue.component()注冊的組件（下圖todo-item就是組件的名稱，該名稱可自定義，推薦使用短橫線分隔命名）
定義組件名的2種方式（截圖截自vue官網(wǎng)）
注：建議在html中引用組件時（非字符串模板），組件命名都用短橫線命名且字母全小寫的方式
父組件向子組件傳遞值
父組件：通過屬性的形式進(jìn)行傳遞（比如v-bind:content="item"，通過v-bind屬性把item的值動態(tài)賦給content變量）
子組件：通過props接收父組件傳遞的值
子組件向父組件傳遞值
子組件：通過$emit()方法發(fā)布事件廣播
父組件：捕獲到子組件向外觸發(fā)的事件，然后可執(zhí)行相應(yīng)的方法
下圖為子組件通過$emit()方法向外傳遞delete事件，父組件捕獲到delete事件后執(zhí)行handleDelete()方法
下圖中methods方法里的this默認(rèn)指向vue實(shí)例
不要把methods方法寫成箭頭函數(shù)，因?yàn)榧^函數(shù)會改變this的指向，使this不在默認(rèn)指向vue實(shí)例，而指向undefined
同時vue實(shí)例中的data，computed，watch屬性也都不要寫成箭頭函數(shù)，理由同上
注：@delete="handleDelete"為v-on:click="handleDelete"的簡寫；
:content="item"為v-bind:content="item"的簡寫
補(bǔ)充：怎么注冊全局組件和局部組件
①：注冊全局組件（用Vue.component()，組件名為todo-item，可自定義，推薦使用短橫線分隔命名）
②：注冊局部組件（通過一個 JavaScript 對象來定義組件）
注冊局部組件后，直接引用組件
解決方法是在vue實(shí)例中用components進(jìn)行聲明
關(guān)于vue中父子組件是如何相互傳遞值的問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。
當(dāng)前文章：vue中父子組件是如何相互傳遞值的
URL地址：http://fisionsoft.com.cn/article/giciii.html
