解决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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
详解JavaScript常量定义
Jan 03 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
JS 5种遍历对象的方式
Jun 16 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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP echo()函数讲解
2019/02/15 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python二维码生成识别实例详解
2019/07/16 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python如何爬取动态网站
2020/09/09 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
经贸专业毕业生求职信
2014/03/23 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
中文专业求职信
2014/06/20 职场文书
法语专业求职信
2014/07/20 职场文书
护理见习报告范文
2014/11/03 职场文书
初中毕业生自我评价
2015/03/02 职场文书
大学军训心得体会800字
2016/01/11 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python