vue父組件向子組件(props)傳遞數(shù)據(jù)的方法
vue頁(yè)面結(jié)構(gòu)
在做項(xiàng)目的時(shí)候常常有這樣的一個(gè)情況,這個(gè)頁(yè)面的數(shù)據(jù)(比如:id號(hào))要帶到另一個(gè)頁(yè)面去查詢某個(gè)數(shù)據(jù)的詳情等,傳統(tǒng)的作法不是在url上加參數(shù),cookie或者是現(xiàn)在H5的“sessionStorage”和“l(fā)ocalStorage”上賦值,這是頁(yè)面之間傳遞的方法。
隨著Angularjs,React,Vue的流行組件式的開(kāi)發(fā)方式成為另一種不錯(cuò)的解決方案。
最近就有一些小伙伴問(wèn)我,vue組件之間是如何傳遞參數(shù)的?其實(shí)vue是有三種方式可以組件之間傳遞數(shù)據(jù)(props,組件通信,slot),這次就說(shuō)第一種方式如下:
a父組件內(nèi)容:
引入b子組件import b form 'b.vue'
components: {'b-div': b} // 注冊(cè),只能在當(dāng)前a組件里使用 <b-div :propsname='datas(向子組件傳遞的參數(shù))'></b-div>
b子組件內(nèi)容:
<template> <div>{{propsname}}</div> </template> export default{ props: ['propsname'], data(){} }
只要在a組件中的datas的值一直在改變,在b子組件中props就會(huì)實(shí)時(shí)監(jiān)聽(tīng)propsname的變化,在頁(yè)面上也會(huì)做出相應(yīng)的渲染,使用方式也是{{propsname}}。
PS:下面給大家介紹下vue父子組件間傳值(props)
先定義一個(gè)子組件,在組件中注冊(cè)props
<template> <div> <div>{{message}}(子組件)</div> </div> </template> <script> export default { props: { message: String //定義傳值的類(lèi)型<br> } } </script> <style> </style>
在父組件中,引入子組件,并傳入子組件內(nèi)需要的值
<template> <div> <div>父組件</div> <child :message="parentMsg"></child> </div> </template> <script> import child from './child' //引入child組件 export default { data() { return { parentMsg: 'a message from parent' //在data中定義需要傳入的值 } }, components: { child } } </script> <style> </style>
這種方式只能由父向子傳遞,子組件不能更新父組件內(nèi)的data
總結(jié)
以上所述是小編給大家介紹的vue父組件向子組件(props)傳遞數(shù)據(jù)的方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue props 單向數(shù)據(jù)流的實(shí)現(xiàn)
這篇文章主要介紹了Vue props 單向數(shù)據(jù)流的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vue中provide和inject的用法及說(shuō)明(vue組件爺孫傳值)
這篇文章主要介紹了vue中provide和inject的用法及說(shuō)明(vue組件爺孫傳值),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05vue項(xiàng)目 npm run build 打包項(xiàng)目防止瀏覽器緩存的操作方法
這篇文章主要介紹了vue項(xiàng)目 npm run build 打包項(xiàng)目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法,每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)
這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信
本文主要介紹了django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02Vue中的v-model,v-bind,v-on的區(qū)別解析
vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫(kù)或既有項(xiàng)目整合,vue.js有配套的第三方類(lèi)庫(kù),可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā),這篇文章主要介紹了v-model,v-bind,v-on的區(qū)別,需要的朋友可以參考下2022-12-12Vue3中集成高德地圖并實(shí)現(xiàn)平移縮放功能
隨著前端技術(shù)的不斷發(fā)展,地圖應(yīng)用在我們的項(xiàng)目中越來(lái)越常見(jiàn),本文將介紹如何在Vue3項(xiàng)目中集成高德地圖,并通過(guò)簡(jiǎn)單的配置實(shí)現(xiàn)地圖的平移和縮放功能,需要的朋友可以參考下2024-09-09