vue子組件中mounted取不到props中的值情況
更新時(shí)間：2022年04月23日 09:59:51 作者：Luopan13
這篇文章主要介紹了vue子組件中mounted取不到props中的值情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
子組件mounted取不到props的值
問(wèn)題：傳到子組建到數(shù)據(jù)是從接口調(diào)用的，導(dǎo)致創(chuàng)建頁(yè)面的時(shí)候把空對(duì)象或者數(shù)組傳給了子組件
方法一
用watch來(lái)監(jiān)聽(tīng)props中值是否有變化
方法二（建議）
調(diào)用子組件的時(shí)候加上v-if判斷，判斷數(shù)組或者對(duì)象是否存在數(shù)據(jù)
組件props第一次取不到值
給值加上sync
<el-dialog title="測(cè)試" :visible.sync="dialog" width="40%"> ? ? ? <room-Checked @event1="change($event)" :date.sync="date" />? ? ? </el-dialog>
使用v-if
<el-dialog title="測(cè)試" :visible.sync="dialog" width="40%"> ? ? ? <room-Checked @event1="change($event)" :date.sync="date" v-if="data.length > 0" />? ? ? </el-dialog>
記得在data里先定義一下 data= []
在子組件里使用watch
props:[ data ]
? watch: {
? ? date (newValue, oldValue) {
? ? ? if (newValue !== oldValue) {
? ? ??? ? this.id = this.data[0].id
? ? ? ? console.log('date', this.id)
? ? ? }
? ? }
? },以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
elementUI樣式修改未生效問(wèn)題詳解(掛載到了body標(biāo)簽上)
vue+elementUI項(xiàng)目開(kāi)發(fā)中,經(jīng)常遇到修改elementUI組件樣式無(wú)效的問(wèn)題,這篇文章主要給大家介紹了關(guān)于elementUI樣式修改未生效問(wèn)題的相關(guān)資料,掛載到了body標(biāo)簽上,需要的朋友可以參考下2023-04-04
Vue中的echarts圖表如何實(shí)現(xiàn)loading效果
這篇文章主要介紹了Vue中的echarts圖表如何實(shí)現(xiàn)loading效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3項(xiàng)目如何國(guó)際化實(shí)戰(zhàn)指南
像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪問(wèn)來(lái)自世界各地用戶,所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目如何國(guó)際化的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue動(dòng)態(tài)禁用控件綁定disable的例子
今天小編就為大家分享一篇vue動(dòng)態(tài)禁用控件綁定disable的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue打包優(yōu)化時(shí)配置webpack的8大方案小結(jié)
vue-cli?生成的項(xiàng)目通常集成Webpack?,在打包的時(shí)候,需要webpack來(lái)做一些事情,這里我們希望它可以壓縮代碼體積,提高運(yùn)行效率,本文為大家整理了8大webpack配置方案,希望對(duì)大家有所幫助2024-02-02
Vue中@click.native的使用方法及場(chǎng)景
在組件中時(shí)?？吹紷click.native,在項(xiàng)目中遇到后,簡(jiǎn)單介紹下,這篇文章主要給大家介紹了關(guān)于Vue中@click.native的使用方法及場(chǎng)景的相關(guān)資料,需要的朋友可以參考下2023-11-11
Element-ui 自帶的兩種遠(yuǎn)程搜索(模糊查詢)用法講解
這篇文章主要介紹了Element-ui 自帶的兩種遠(yuǎn)程搜索(模糊查詢)用法講解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue仿淘寶訂單狀態(tài)tab切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
本篇文章主要介紹了如何在 Vue.js 中使用第三方j(luò)s庫(kù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
vue3 Teleport瞬間移動(dòng)函數(shù)使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3 Teleport瞬間移動(dòng)函數(shù)使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03