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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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
PHP中的array数组类型分析说明
2010/07/27 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
js实现随机点名器精简版
2020/06/29 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python中的列表知识点汇总
2015/04/14 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
用Python 执行cmd命令
2020/12/18 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
深圳-东方伟业笔试部分
2015/02/11 面试题
请解释virtual关键字的含义
2015/06/17 面试题
Linux如何为某个操作添加别名
2015/02/05 面试题
七一建党节慰问信
2015/02/14 职场文书
异地恋情人节寄语
2015/02/28 职场文书
使用python绘制横竖条形图
2022/04/21 Python