本篇文章為大家展示了vue中怎么通過父組件向子組件傳遞數(shù)據(jù),內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
成都創(chuàng)新互聯(lián)專注于城廂企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站定制開發(fā)。城廂網(wǎng)站建設(shè)公司,為城廂等地區(qū)提供建站服務(wù)。全流程按需定制制作,專業(yè)設(shè)計,全程項目跟蹤,成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
vue頁面結(jié)構(gòu)
在做項目的時候常常有這樣的一個情況,這個頁面的數(shù)據(jù)(比如:id號)要帶到另一個頁面去查詢某個數(shù)據(jù)的詳情等,傳統(tǒng)的作法不是在url上加參數(shù),cookie或者是現(xiàn)在H5的“sessionStorage”和“l(fā)ocalStorage”上賦值,這是頁面之間傳遞的方法。
隨著Angularjs,React,Vue的流行組件式的開發(fā)方式成為另一種不錯的解決方案。
最近就有一些小伙伴問我,vue組件之間是如何傳遞參數(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就會實時監(jiān)聽propsname的變化,在頁面上也會做出相應(yīng)的渲染,使用方式也是{{propsname}}。
PS:下面給大家介紹下vue父子組件間傳值(props)
先定義一個子組件,在組件中注冊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)容就是vue中怎么通過父組件向子組件傳遞數(shù)據(jù),你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章題目:vue中怎么通過父組件向子組件傳遞數(shù)據(jù)
URL網(wǎng)址:http://muchs.cn/article44/ghephe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、微信公眾號、網(wǎng)站改版、Google、企業(yè)建站、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)