解决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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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
Protoss建筑一览
2020/03/14 星际争霸
PHP多线程类及用法实例
2014/12/03 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
Python对wav文件的重采样实例
2020/02/25 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
外贸业务员工作职责
2014/01/06 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
九年级语文教学反思
2014/02/04 职场文书
供货协议书范本
2014/04/22 职场文书
辅导员评语
2014/05/04 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
承诺书范文
2014/06/03 职场文书
信访维稳承诺书
2015/05/04 职场文书
毕业班工作总结
2015/08/10 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android