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-router路由判斷頁(yè)面未登錄跳轉(zhuǎn)到登錄頁(yè)面的實(shí)例
下面小編就為大家?guī)硪黄猇ue-router路由判斷頁(yè)面未登錄跳轉(zhuǎn)到登錄頁(yè)面的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
Rsbuild,一個(gè)基于Rspack的高效Web構(gòu)建工具,將Rspack的強(qiáng)大功能與易用性相結(jié)合,是你項(xiàng)目搭建的不二之選,Rsbuild不僅提供了開箱即用的體驗(yàn),還引入了高性能的構(gòu)建機(jī)制,本文給大家介紹了Vue2遷移Rsbuild詳細(xì)步驟,需要的朋友可以參考下2024-10-10
Vue+springboot批量刪除功能實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue+springboot批量刪除功能,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
在本篇文章里小編給大家分享的是關(guān)于vuex入門最詳細(xì)整理的相關(guān)內(nèi)容，需要的朋友們參考下。2020-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)留言板todolist功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Vue已經(jīng)成為企業(yè)項(xiàng)目開發(fā)的熱門框架,也是前端面試中常被問到的內(nèi)容,下面這篇文章主要介紹了前端高頻面試題之Vue高級(jí)篇的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-05-05
vue高級(jí)組件之provide與inject使用及說明
這篇文章主要介紹了vue高級(jí)組件之provide與inject使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
在組件化開發(fā)的過程中難免會(huì)遇見子組件和父組件之間的通訊那么這里講關(guān)于vue2和vue3不同的通訊方式，文中有詳細(xì)的代碼示例供大家參考，感興趣的同學(xué)可以閱讀下2023-05-05
Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場(chǎng)景
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場(chǎng)景的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue移動(dòng)端項(xiàng)目vant組件庫(kù)之tag詳解
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目vant組件庫(kù)之tag詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04