解決vue 子組件修改父組件傳來的props值報錯問題
更新時間：2019年11月09日 09:33:59 作者：254980080
今天小編就為大家分享一篇解決vue 子組件修改父組件傳來的props值報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue不推薦直接在子組件中修改父組件傳來的props的值，會報錯
[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: "result" (found in component )
<input v-model="currentSearch" type="text" class="input-search" @keydown.enter="doSearch">
export default {
name:"round-search-bar",
props:['search'], //父組件傳來的值
data(){
return {
currentSearch: this.search //通過data, 定義新變量currentSearch, 這樣currentSearch的值變更時，不會影響父組件傳來的search的值
}
},
methods: {
doSearch(){
Util.searchAPI(this.$router,this.currentSearch)
}
},
}
以上這篇解決vue 子組件修改父組件傳來的props值報錯問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3通過render函數(shù)實現(xiàn)菜單下拉框的示例
本文主要介紹了vue3通過render函數(shù)實現(xiàn)菜單下拉框的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)
這篇文章主要介紹了Vue項目通過vue-i18n實現(xiàn)國際化方案,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
最近vue項目中遇到了需求,客戶端需要實現(xiàn)以excel表格形式下載數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue下載excel文件的四種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue 實現(xiàn)Web端的定位功能 獲取經(jīng)緯度
這篇文章主要介紹了vue 實現(xiàn)Web端的定位功能獲取經(jīng)緯度，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了詳解Vue單元測試case寫法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue中mintui的field實現(xiàn)blur和focus事件的方法
今天小編就為大家分享一篇Vue中mintui的field實現(xiàn)blur和focus事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關(guān)于Vue中keep-alive的作用及使用方法
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動態(tài)組件時，會緩存不活動的組件實例，該組件將不會銷毀，這篇文章主要介紹了關(guān)于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下2023-04-04
本篇文章主要介紹了vue服務(wù)端渲染的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Vue開發(fā)模式是一種基于Vue.js框架的開發(fā)方式,它可以幫助開發(fā)者更高效地構(gòu)建和維護(hù)復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開發(fā)模式提示的簡單解決辦法,需要的朋友可以參考下2024-04-04