解决vue 子组件修改父组件传来的props值报错问题


Posted in Javascript onNovember 09, 2019

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值报错问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
javascript Demo模态窗口
Dec 06 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
javascript实用方法总结
Feb 06 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JSON相关知识汇总
Jul 03 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 Javascript
解决vue组件中click事件失效的问题
Nov 09 #Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 #Javascript
Vue根据条件添加click事件的方式
Nov 09 #Javascript
浅谈vuex中store的命名空间
Nov 08 #Javascript
解决$store.getters调用不执行的问题
Nov 08 #Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 #Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php 数学运算验证码实现代码
2009/10/11 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Form表单及django的form表单的补充
2019/07/25 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
会计专业自我鉴定
2014/02/10 职场文书
合伙经营协议书
2014/04/18 职场文书
物业品质提升方案
2014/06/08 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
计算机实训报告范文
2014/11/05 职场文书
同意报考证明
2015/06/17 职场文书
七年级思品教学反思
2016/02/20 职场文书