Vue中props報(bào)錯(cuò)問題解決方案
一、[Vue warn]: The data property "inputUserData" is already declared as a prop. Use prop default value instead.
意思:"inputUserData"這個(gè)值已經(jīng)聲明成了一個(gè)prop數(shù)據(jù),掛載的時(shí)候?qū)⒛J(rèn)使用prop中的"inputUserData"。
報(bào)錯(cuò)原因:在props中聲明了一次,在data屬性中又聲明了一次。
解決:把data屬性中的"inputUserData"刪掉。
二、[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "inputUserData"
意思:避免修改prop里面的值,建議用基于"inputUserData"的值或者計(jì)算屬性修改"inputUserData"。
報(bào)錯(cuò)原因:
在子組件中,"inputUserData"這個(gè)值放在v-model屬性中,存在被修改覆蓋的風(fēng)險(xiǎn),后者存在其他被修改的可能,比如調(diào)用某個(gè)方法把"inputUserData"里的值改了,
措施:如果prop中的"inputUserData"接收的是初始值,將要對(duì)其加工,可以放在計(jì)算屬性中進(jìn)行加工,或者放到另一字段比如“"inputUserDataCopy”接收"inputUserData"值,然后直接對(duì)"inputUserDataCopy"進(jìn)行操作
三、在解決prop問題的時(shí)候,嘗試用this.$parent.[父組件身上的值]來獲取父組件身上的數(shù)據(jù)常遇到的問題:this.$parent.[父組件身上的值]返回undefind。
原因:你在A本地組件中使用了B本地子組件,但是把B本地子組件包裹在了一個(gè)以上的elmentUI等其他第三方組件中,也就是說這個(gè)本地B組件有N個(gè)父組件,純純使用this.$parent.[父組件身上的值],你只調(diào)用了一層父組件身上數(shù)據(jù)。
措施:在子組件相應(yīng)的位置打印console.log(this.$parent),然后一層一層地從$parent下找,就會(huì)找到你想要的數(shù)據(jù)了。如果要獲取,就點(diǎn)$parent地用下去,比如兩層父組件,那就this.$parent.$parent.value。
到此這篇關(guān)于Vue中props報(bào)錯(cuò)或問題解決的文章就介紹到這了,更多相關(guān)Vue props報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解vue-cli4 配置不同開發(fā)環(huán)境打包命令
這篇文章主要介紹了vue-cli4 配置不同開發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue.js實(shí)現(xiàn)全屏背景圖片滑動(dòng)切換特效
本文主要介紹了Vue.js實(shí)現(xiàn)全屏背景圖片滑動(dòng)切換特效,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01Vue scrollBehavior 滾動(dòng)行為實(shí)現(xiàn)后退頁面顯示在上次瀏覽的位置
這篇文章主要介紹了Vue scrollBehavior 滾動(dòng)行為實(shí)現(xiàn)后退頁面顯示在上次瀏覽的位置,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04vue?openlayers實(shí)現(xiàn)臺(tái)風(fēng)軌跡示例詳解
這篇文章主要為大家介紹了vue?openlayers實(shí)現(xiàn)臺(tái)風(fēng)軌跡示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡(jiǎn)單的實(shí)現(xiàn)彈框,遮罩,點(diǎn)擊其他區(qū)域關(guān)閉彈框, 簡(jiǎn)單的思路是以一個(gè)div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹,感興趣的朋友一起看看吧2018-09-09