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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
解析Json字符串的三种方法日常常用
May 02 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python实现屏保计时器的示例代码
2018/08/08 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
罗技美国官网:Logitech美国
2020/01/22 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
银行求职自荐信
2014/06/30 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers