Vue将props值实时传递 并可修改的操作


Posted in Javascript onAugust 09, 2020

我们都知道props值是只读的,子组件内不可直接修改,会报错滴

但是很多时候这个值是需要子组件主动修改的,一般我们会使用this.$emit()去修改,但比较麻烦

下面这种方式可以实现:

1、父组件实时修改props值时,子组件可以接收到改变

2、子组件可主动修改该值

<div>{{RealValue}}</div>

 props: [ "value" ],
 watch: {
 value (v) {
  this.RealValue = v
 }
 },
 data () {
 return {
  RealValue: this.value
 }
 }

原理很简单,就是使用一个RealValue作为实际显示的参数,并且使用watch实时把value值传给他

PS:这里的值是字符串格式,如果value是对象或者数组,watch处要写成:

watch: {
 value:{
  deep: true,
  handler(v) {
   this.RealValue = v
  }
 }
 },

补充知识:vue组件内数值做watch监听,首次监听不到的问题

在vue中会使用很多子组件,有时因为组件的类型等原因会导致数据监听不到的情况,下面列举几种问题和解决方法

子组件内数据首次监听不到时,可以使用【immediate】方法,其值是true或false;immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法

watch:{
 uploadImageUrl:{
 immediate:true,
 handler:function(newval){
 this.uploadShowImageUrl = newval;
 }
 }
},

子组件的深度监听函数【deep】,其值是true或false;确认是否深入监听。deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器(受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除)

watch:{
 uploadImageUrl:{
 deep:true,
 handler:function(newval){
 this.uploadShowImageUrl = newval;
 }
 }
},

给组件内的props为对象的数据设置默认值

如果prop中接收的数据为对象或者数组类型,是不可以像字符串等【default:''】直接指定default值的,会报【Invalid default value for prop “defaultProp”: Props with type Object/Array must use a factory function to return the default value.】错误,修正方法如下

defaultProp: {
 type: Object,
 default: function(){
  return {
   children: 'children',
   label: 'name'
  }
 }
},

以上这篇Vue将props值实时传递 并可修改的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 #Javascript
vue 子组件watch监听不到prop的解决
Aug 09 #Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 #Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 #Javascript
bootstrap实现tab选项卡切换
Aug 09 #Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 #Javascript
js利用iframe实现选项卡效果
Aug 09 #Javascript
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
YII中assets的使用示例
2014/07/31 PHP
PHP 正则表达式小结
2015/02/12 PHP
PHP经典面试题集锦
2015/03/19 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
使用Python生成XML的方法实例
2017/03/21 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
商业房地产广告语
2014/03/13 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
建筑工地宣传标语
2014/06/18 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
工厂标语大全
2014/10/06 职场文书
教育实习指导教师评语
2014/12/31 职场文书
交通事故调解协议书
2015/05/20 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
mysql的数据压缩性能对比详情
2021/11/07 MySQL
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS