vue父組件向子組件(props)傳遞數(shù)據(jù)的方法
vue頁面結(jié)構(gòu)
在做項(xiàng)目的時(shí)候常常有這樣的一個(gè)情況，這個(gè)頁面的數(shù)據(jù)（比如：id號(hào)）要帶到另一個(gè)頁面去查詢某個(gè)數(shù)據(jù)的詳情等，傳統(tǒng)的作法不是在url上加參數(shù)，cookie或者是現(xiàn)在H5的“sessionStorage”和“l(fā)ocalStorage”上賦值，這是頁面之間傳遞的方法。
隨著Angularjs,React,Vue的流行組件式的開發(fā)方式成為另一種不錯(cuò)的解決方案。
最近就有一些小伙伴問我，vue組件之間是如何傳遞參數(shù)的？其實(shí)vue是有三種方式可以組件之間傳遞數(shù)據(jù)（props，組件通信，slot），這次就說第一種方式如下：
a父組件內(nèi)容：
引入b子組件import b form 'b.vue'
components: {'b-div': b} // 注冊，只能在當(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)聽propsname的變化，在頁面上也會(huì)做出相應(yīng)的渲染，使用方式也是{{propsname}}。
PS：下面給大家介紹下vue父子組件間傳值(props)
先定義一個(gè)子組件，在組件中注冊props
<template>
<div>
<div>{{message}}(子組件)</div>
</div>
</template>
<script>
export default {
props: {
message: String //定義傳值的類型<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ù)的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue計(jì)算屬性computed的使用方法,結(jié)合實(shí)例形式分析了vue計(jì)算屬性computed的基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
vue動(dòng)態(tài)菜單、動(dòng)態(tài)路由加載以及刷新踩坑實(shí)戰(zhàn)
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)菜單、動(dòng)態(tài)路由加載以及刷新踩坑的相關(guān)資料,踩的這些坑其實(shí)是挺常見的,大家可以看看,避免遇到的時(shí)候再踩到同樣的坑,需要的朋友可以參考下2021-10-10
vue實(shí)現(xiàn)下拉框的多選功能(附后端處理參數(shù))
本文介紹了如何使用Vue實(shí)現(xiàn)下拉框的多選功能,實(shí)現(xiàn)了在選擇框中選擇多個(gè)選項(xiàng)的功能,文章詳細(xì)介紹了實(shí)現(xiàn)步驟和示例代碼,對于想要了解如何使用Vue實(shí)現(xiàn)下拉框多選功能的讀者具有一定的參考價(jià)值2023-08-08
vite項(xiàng)目vite.config.js詳細(xì)配置
vite.config.js是Vite框架中的配置文件,用于配置項(xiàng)目的構(gòu)建和運(yùn)行時(shí)的行為,下面這篇文章主要給大家介紹了關(guān)于vite項(xiàng)目vite.config.js詳細(xì)配置的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應(yīng)用,這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝,需要的朋友可以參考下2023-08-08
Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由
這篇文章主要介紹了Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
解決Vue3報(bào)錯(cuò):Property?“xxx“?was?accessed?during?render?but
這篇文章主要給大家介紹了關(guān)于解決Vue3報(bào)錯(cuò):Property?“xxx“?was?accessed?during?render?but?is?not?defined?on?instance.的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
Element-UI el-calendar樣式如何修改日歷
這篇文章主要介紹了Element-UI el-calendar樣式如何修改日歷問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實(shí)現(xiàn)方式
本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺效果2018-01-01