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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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
图书管理程序(一)
2006/10/09 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php读取3389的脚本
2014/05/06 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
JS实现星星海特效
2019/12/24 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
python非递归全排列实现方法
2017/04/10 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Django REST framework视图的用法
2019/01/16 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
毕业生自我推荐
2013/11/04 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
通知怎么写?
2019/04/17 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python