<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区| 亚洲天堂中文字幕在线| 激情小说亚洲色图| 日本免费人成黄页网观看视频| 一区二区亚洲精品精华液| 成年女人喷潮毛片免费播放| 亚洲中文字幕无码中文字| 精品少妇人妻AV免费久久洗澡| 亚洲欧美自偷自拍另类视| 日韩在线a视频免费播放| 精品成人一区二区三区免费视频| 免费国产真实迷j在线观看| 青青免费在线视频| 亚洲精品高清无码视频| 91免费在线视频| 亚洲av日韩av高潮潮喷无码| 2019中文字幕在线电影免费| 亚洲av成人一区二区三区| 国产精品免费电影| 国产免费区在线观看十分钟 | WWW亚洲色大成网络.COM| 亚洲精品乱码久久久久久不卡| 成人免费无码H在线观看不卡| 久久亚洲国产成人亚| 99久久久国产精品免费无卡顿| 亚洲人成色4444在线观看| jlzzjlzz亚洲乱熟在线播放| 伊人久久免费视频| 亚洲精品第一国产综合亚AV| 亚洲综合色视频在线观看| 麻豆高清免费国产一区| 国产亚洲综合久久| 久久精品国产亚洲AV果冻传媒| 野花高清在线观看免费3中文| 男人的天堂av亚洲一区2区| 久久亚洲国产午夜精品理论片| 在线精品一卡乱码免费| 一级毛片a免费播放王色电影 | 蜜臀亚洲AV无码精品国产午夜.| 亚洲欧洲中文日韩av乱码|