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