<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
        主站蜘蛛池模板: 免费看男女下面日出水视频| 成全动漫视频在线观看免费高清版下载 | 亚洲一区免费视频| 日韩在线永久免费播放| 黄页免费的网站勿入免费直接进入| 一二三四免费观看在线电影| 久久久久亚洲精品中文字幕| 久久久无码精品亚洲日韩京东传媒 | 亚洲日韩精品无码专区加勒比| 色偷偷尼玛图亚洲综合| a免费毛片在线播放| 无码日韩人妻av一区免费| 亚洲另类古典武侠| 一区二区在线视频免费观看| 亚洲黄色免费在线观看| 免费亚洲视频在线观看| 性xxxx黑人与亚洲| 免费在线黄色电影| 亚洲一级二级三级不卡| 深夜特黄a级毛片免费播放| 无码午夜成人1000部免费视频| 国产成人啪精品视频免费网| 久久精品国产亚洲AV麻豆网站| 免费专区丝袜脚调教视频| 色偷偷女男人的天堂亚洲网| 久久久高清免费视频| 免费国产va在线观看| 亚洲va国产va天堂va久久| 久久精品国产亚洲AV久| 又大又硬又爽又粗又快的视频免费| 亚洲国产精品美女| 性色午夜视频免费男人的天堂| 亚洲卡一卡2卡三卡4麻豆| 四虎永久免费地址在线网站| 中文字幕av免费专区| 99久久这里只精品国产免费| 亚洲AV无码一区二区一二区| 亚洲精品无码永久在线观看你懂的 | 亚洲日韩在线中文字幕综合 | 永久看日本大片免费35分钟| 亚洲色偷偷偷综合网|