解决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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
design vue 表格开启列排序的操作
Oct 28 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
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
js实现动态时钟
2020/03/12 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
React实现轮播效果
2020/08/25 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
在python中安装basemap的教程
2018/09/20 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
linux面试题参考答案(10)
2013/11/04 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
晨会主持词
2014/03/17 职场文书
督导岗位职责
2015/02/04 职场文书
开票员岗位职责
2015/02/12 职场文书
2015年读书月活动总结
2015/03/26 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python