本篇文章給大家分享的是有關(guān)怎么在Vue.js中使用props傳遞數(shù)據(jù),小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話(huà)不多說(shuō),跟著小編一起來(lái)看看吧。
專(zhuān)業(yè)成都網(wǎng)站建設(shè)公司,做排名好的好網(wǎng)站,排在同行前面,為您帶來(lái)客戶(hù)和效益!創(chuàng)新互聯(lián)公司為您提供成都網(wǎng)站建設(shè),五站合一網(wǎng)站設(shè)計(jì)制作,服務(wù)好的網(wǎng)站設(shè)計(jì)公司,網(wǎng)站建設(shè)、成都網(wǎng)站制作負(fù)責(zé)任的成都網(wǎng)站制作公司!
基本用法
通常父組件的模板中包含子組件,父組件要正向地向子組件傳遞數(shù)據(jù)或參數(shù),子組件接收到后根據(jù)參數(shù)的不同來(lái)渲染不同的內(nèi)容或執(zhí)行操作。這個(gè)正向傳遞數(shù)據(jù)的過(guò)程就是通過(guò)props來(lái)實(shí)現(xiàn)的。
在組件中,使用選項(xiàng)props來(lái)聲明需要從父級(jí)接收的數(shù)據(jù),props的值可以是兩種,一種是字符串?dāng)?shù)組,一種是對(duì)象。
示例:構(gòu)造一個(gè)數(shù)組,接收一個(gè)來(lái)自父組件的message,并把它再組件模板中渲染
props
props中聲明的數(shù)據(jù)與組件函數(shù)return的數(shù)據(jù)主要區(qū)別是:**props的數(shù)據(jù)來(lái)自父級(jí),而data中的數(shù)據(jù)是組件自己的數(shù)據(jù),作用域是組件本身。**這兩種數(shù)據(jù)都可以在模板template及計(jì)算屬性computed和方法methods中使用。
上例的數(shù)據(jù)message就是通過(guò)props從父級(jí)傳遞過(guò)來(lái)的,在組件的字的那個(gè)一標(biāo)簽上直接寫(xiě)該props的名稱(chēng),如果要傳遞多個(gè)數(shù)據(jù),在props數(shù)組中添加項(xiàng)即可。
注意:由于HTML特性不區(qū)分大小寫(xiě),當(dāng)使用DOM模板時(shí),駝峰命名的props名稱(chēng)要轉(zhuǎn)為短橫分割命名,例如:
有時(shí)候,傳遞的數(shù)據(jù)并不是直接寫(xiě)死的,而是來(lái)自父級(jí)的動(dòng)態(tài)數(shù)據(jù),這時(shí)候可以使用指令v-bing來(lái)動(dòng)態(tài)綁定props的值,當(dāng)父組件的數(shù)據(jù)變化時(shí),也會(huì)傳遞給子組件。
動(dòng)態(tài)綁定
以上就是怎么在Vue.js中使用props傳遞數(shù)據(jù),小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。