<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
        當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

        解決vue組件props傳值對(duì)象獲取不到的問(wèn)題

        來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 21:55:26
        文檔

        解決vue組件props傳值對(duì)象獲取不到的問(wèn)題

        解決vue組件props傳值對(duì)象獲取不到的問(wèn)題:先說(shuō)問(wèn)題,父組件利用props向子組件傳值,瀏覽器 console 有這個(gè)值,但是獲取不到內(nèi)部的屬性,困了我3個(gè)小時(shí),真的** personal console 以下為原代碼 1、home.vue(父組件)--personal是被傳的參數(shù) <!--子組件--> <form
        推薦度:
        導(dǎo)讀解決vue組件props傳值對(duì)象獲取不到的問(wèn)題:先說(shuō)問(wèn)題,父組件利用props向子組件傳值,瀏覽器 console 有這個(gè)值,但是獲取不到內(nèi)部的屬性,困了我3個(gè)小時(shí),真的** personal console 以下為原代碼 1、home.vue(父組件)--personal是被傳的參數(shù) <!--子組件--> <form

        以下為原代碼

        1、home.vue(父組件)--personal是被傳的參數(shù)

        <!--子組件-->
        <form-picker class="form-picker"
         :personal="personal"
        >
        </form-picker>
        export default {
         data(){
         return{
         personal:{
         state:'',////判斷是修改狀態(tài),還是新增狀態(tài) add/edit
         data:[]
         }
         }
         },
         mounted(){
         this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>{
         this.personal.data = res.data.data //這里給personal對(duì)象賦值接口傳來(lái)的數(shù)據(jù)
         })
         },
        }

        2、formPicker (子組件) --接收personal

        export default {
         props:['active','personal'],
         mounted(){
         console.log(149,this.personal)
         console.log(150,this.personal.state)
         }
        }

        運(yùn)行結(jié)果

        明明149行有 state 值,150行輸出卻沒(méi)有了,是不是超級(jí)奇怪

        后面經(jīng)過(guò)大佬的講解,其實(shí)瀏覽器console.log也是應(yīng)該沒(méi)有的

        所以,其實(shí)我們子組件一開始根本就沒(méi)有取到這個(gè)personal這個(gè)對(duì)象。

        3、解決方法--使用watch

        父組件

        export default {
         data(){
         return{
         personal:{
         state:'',////判斷是修改狀態(tài),還是新增狀態(tài) add/edit
         data:[]
         }
         }
         },
         mounted(){
         this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>{
         //this.personal.data = res.data.data //這里給personal對(duì)象賦值接口傳來(lái)的數(shù)據(jù)
         //使用以下方法重新賦值,上面方法watch監(jiān)聽(tīng)不到,具體什么原因,我也不清楚,知道的告知我!謝謝
         this.personal = {
         data: res.data.data,
         state: 'edit'
         }
         })
         },
        }

        接下來(lái)子組件就能 watch 到 personal 了 子組件

        watch:{
         personal(newValue,oldValue){
         console.log(181,newValue) 
         },
        /** 
        輸出 { data: res.data.data, state: 'edit' } **/ }

        總結(jié)

        以上所述是小編給大家介紹的解決vue組件props傳值對(duì)象獲取不到的問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
        如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

        聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        解決vue組件props傳值對(duì)象獲取不到的問(wèn)題

        解決vue組件props傳值對(duì)象獲取不到的問(wèn)題:先說(shuō)問(wèn)題,父組件利用props向子組件傳值,瀏覽器 console 有這個(gè)值,但是獲取不到內(nèi)部的屬性,困了我3個(gè)小時(shí),真的** personal console 以下為原代碼 1、home.vue(父組件)--personal是被傳的參數(shù) <!--子組件--> <form
        推薦度:
        標(biāo)簽: VUE 組件 獲取的
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲日韩一区精品射精| 成年人免费视频观看| www国产亚洲精品久久久| 农村寡妇一级毛片免费看视频| 国产成人精品免费视| 亚洲a在线视频视频| 永久免费AV无码网站国产| 亚洲综合av永久无码精品一区二区| 国产成人无码精品久久久免费 | 亚洲欧洲国产成人精品| 亚洲乱码卡一卡二卡三| 亚洲黄色免费网址| 亚洲人成日本在线观看| 国产一卡二卡3卡四卡免费| 亚洲一区二区三区成人网站 | 久久久免费观成人影院| 中文亚洲AV片在线观看不卡 | 毛片基地看看成人免费| 久久久久亚洲爆乳少妇无| 国产精品网站在线观看免费传媒 | 色老头综合免费视频| 国产午夜亚洲不卡| 美女视频黄的免费视频网页 | 久久精品国产亚洲av高清漫画| 99久久久国产精品免费牛牛四川| 国产一区二区免费在线| 国产亚洲精品欧洲在线观看| 亚洲色欲久久久久综合网| 免费无码av片在线观看| 亚洲一区二区影视| mm1313亚洲国产精品美女| 久久av免费天堂小草播放| 内射干少妇亚洲69XXX| 最新69国产成人精品免费视频动漫| 国产亚洲精品91| 亚洲AV无码一区二区乱孑伦AS| 青娱分类视频精品免费2| 免费无码午夜福利片69| 噜噜噜亚洲色成人网站∨| 免费黄色小视频网站| 中文在线日本免费永久18近|