<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
        主站蜘蛛池模板: 成年女人毛片免费播放人| 亚洲一区二区精品视频| 久久精品国产亚洲AV无码偷窥| 一级看片免费视频| 亚洲欧洲日产国码一级毛片| 免费福利在线观看| 久久精品国产免费| 亚洲伦另类中文字幕| 无码日韩精品一区二区免费暖暖 | 国产精品亚洲专区无码WEB| 在线观看免费高清视频| 亚洲日韩AV一区二区三区中文| 亚洲人成网站免费播放| 日韩精品亚洲专区在线影视| 亚洲 小说区 图片区 都市| 国产精品福利片免费看| 久久久久亚洲精品影视| 无码人妻一区二区三区免费手机| 在线精品亚洲一区二区| 国产免费av一区二区三区| 亚洲精品视频免费| 亚洲精品国产成人99久久| 久热中文字幕在线精品免费| 国产精品国产亚洲区艳妇糸列短篇| www亚洲一级视频com| 久久国产乱子精品免费女| 亚洲国产人成在线观看| 免费一级毛片清高播放| 国产精品99精品久久免费| 亚洲高清中文字幕免费| 久久精品国产精品亚洲艾草网美妙| 无码免费一区二区三区免费播放 | 亚洲视频在线免费看| 精品国产精品久久一区免费式| 有色视频在线观看免费高清在线直播| 亚洲精品乱码久久久久66| 思思99re66在线精品免费观看| 特级毛片在线大全免费播放| 亚洲福利视频一区二区三区| 国产一级淫片a免费播放口之| 中文字幕在线免费看|