解決vue 子組件修改父組件傳來(lái)的props值報(bào)錯(cuò)問(wèn)題

更新時(shí)間：2019年11月09日 09:33:59 作者：254980080

今天小編就為大家分享一篇解決vue 子組件修改父組件傳來(lái)的props值報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue不推薦直接在子組件中修改父組件傳來(lái)的props的值，會(huì)報(bào)錯(cuò)

[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'],  //父組件傳來(lái)的值
  data(){
    return {
      currentSearch: this.search  //通過(guò)data, 定義新變量currentSearch, 這樣currentSearch的值變更時(shí)，不會(huì)影響父組件傳來(lái)的search的值
    }
  },
  methods: {
    doSearch(){
      Util.searchAPI(this.$router,this.currentSearch)
    }
  },
}

以上這篇解決vue 子組件修改父組件傳來(lái)的props值報(bào)錯(cuò)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3通過(guò)render函數(shù)實(shí)現(xiàn)菜單下拉框的示例
本文主要介紹了vue3通過(guò)render函數(shù)實(shí)現(xiàn)菜單下拉框的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
淺談vue中文件下載的幾種方式及方法封裝
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案(推薦)
這篇文章主要介紹了Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
vue下載excel文件的四種方法實(shí)例
最近vue項(xiàng)目中遇到了需求,客戶端需要實(shí)現(xiàn)以excel表格形式下載數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue下載excel文件的四種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
vue 實(shí)現(xiàn)Web端的定位功能獲取經(jīng)緯度
這篇文章主要介紹了vue 實(shí)現(xiàn)Web端的定位功能獲取經(jīng)緯度，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
詳解Vue單元測(cè)試case寫(xiě)法
這篇文章主要介紹了詳解Vue單元測(cè)試case寫(xiě)法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法
今天小編就為大家分享一篇Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
關(guān)于Vue中keep-alive的作用及使用方法
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，該組件將不會(huì)銷毀，這篇文章主要介紹了關(guān)于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下
2023-04-04
vue服務(wù)端渲染的實(shí)例代碼
本篇文章主要介紹了vue服務(wù)端渲染的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
vue關(guān)閉開(kāi)發(fā)模式提示的簡(jiǎn)單解決辦法
Vue開(kāi)發(fā)模式是一種基于Vue.js框架的開(kāi)發(fā)方式,它可以幫助開(kāi)發(fā)者更高效地構(gòu)建和維護(hù)復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開(kāi)發(fā)模式提示的簡(jiǎn)單解決辦法,需要的朋友可以參考下
2024-04-04