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中的delete操作符详细介绍
Jun 06 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
详解vue在项目中使用百度地图
Mar 26 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 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
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
php中的常用魔术方法总结
2013/08/02 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
深入了解Django中间件及其方法
2019/07/26 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
创联软件面试题笔试题
2012/10/07 面试题
期中考试后的反思
2014/02/08 职场文书
捐赠仪式主持词
2014/03/19 职场文书
国旗下演讲稿
2014/05/08 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2015年检验科工作总结
2015/04/27 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
SpringBoot快速入门详解
2021/07/21 Java/Android