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)文章
Vue AST的轉(zhuǎn)換實(shí)現(xiàn)方法講解
本節(jié)，我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換，指的是對(duì)AST進(jìn)行一系列操作，將其轉(zhuǎn)換為新的AST的過(guò)程。新的AST可以是原語(yǔ)言或原DSL的描述，也可以是其他語(yǔ)言或其他DSL的描述。例如，我們可以對(duì)模板AST進(jìn)行操作，將其轉(zhuǎn)換為JavaScriptAST2023-01-01
快速解決Vue、element-ui的resetFields()方法重置表單無(wú)效的問(wèn)題
這篇文章主要介紹了快速解決Vue、element-ui的resetFields()方法重置表單無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vue中的scope使用詳解,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了在vue中設(shè)置滾動(dòng)條的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文通過(guò)實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)評(píng)論列表功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-10
這篇文章主要介紹了vue使用axios上傳文件(FormData)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue toggle做一個(gè)點(diǎn)擊切換class(實(shí)例講解)
下面小編就為大家分享一篇使用vue toggle實(shí)現(xiàn)點(diǎn)擊切換class的示例。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題
這篇文章主要介紹了解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
隨著前端技術(shù)的飛速發(fā)展,Vue.js作為一個(gè)流行的JavaScript框架,已經(jīng)被廣泛應(yīng)用于構(gòu)建現(xiàn)代Web應(yīng)用,然而,隨著應(yīng)用的復(fù)雜性和規(guī)模的增加,性能優(yōu)化也成為開(kāi)發(fā)者必須面對(duì)的重要任務(wù),在本篇博客中,我們將探討幾種常用的Vue性能優(yōu)化方法,需要的朋友可以參考下2024-12-12
vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載,iview是全局注入，基本使用原先的類(lèi)名進(jìn)行二次創(chuàng)建公共組件，修改基礎(chǔ)js實(shí)現(xiàn)邏輯，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08