解決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)文章
這篇文章主要介紹了詳解使用jest對vue項目進行單元測試，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了基于vue2的table分頁組件實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vuejs第十篇之vuejs父子組件通信的相關(guān)資料,本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了vite的proxy查看真實請求地址方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
Vue2.0父組件與子組件之間的事件發(fā)射與接收實例代碼
這篇文章主要介紹了Vue2.0父組件與子組件之間的事件發(fā)射與接收實例代碼,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了vue組件內(nèi)部引入外部js文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue中點擊按鈕下載文件，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
國際化就是指在一個項目中，項目中的語言可以進行切換（中英文切換），那么在實際項目中是如何實現(xiàn)的呢，本文就給大家詳細的介紹實現(xiàn)方法,需要的朋友可以參考下2023-07-07
淺談在vue-cli3項目中解決動態(tài)引入圖片img404的問題
這篇文章主要介紹了淺談在vue-cli3項目中解決動態(tài)引入圖片img404的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08