草庐IT

vue子组件监听父组件数据变化并作出改变（亲测有效）

进击的yuan人 2023-04-14 原文

vue子组件监听父组件数据变化并作出改变（亲测有效）

1. 问题

1.1 封装组件时经常会遇到子组件需要根据父组件数据变化并执行对应的操作逻辑
1.2 监听方法中加了deep、immediate 等参数监听数组/对象还是没有生效
1.3 类型table组件需要根据父组件数据变化对表格数据进行更新
1.4 根据数据动态渲染组件需实时监听父组件变化
1.5 使用$refs 有些时候很难找到嵌套组件的ref

2. 思路

2.1 本文章主要的思路就是 provide / inject

2.2 创建父组件时，无论有多少层级的子组件都可以进行数据的相互依赖
2.3 那么在组件可以利用这个依赖对父组件数据进行监听

3. 解决方法

3.1 首先在父组件定义 provide，代码如下
//父组件提供参数给子组件（响应式时需设置为对象）
provide(){
  return {
    superParams:this
  }
},
data(){ //定义几个参数
	return {
		test:{
          testLevel1:{
            testLevel2:''
          }
        },
        testList:[]
	}
}
3.2 子组件添加 inject，代码如下
// 子组件：childrenComponent1
inject: ['superParams'],
watch:{ //监听数据变化
  'superParams.test':{
      immediate:true, // 将立即以表达式的当前值触发回调
      handler:function (val,oldVal) {
          console.log("监听test对象");
          console.log(val,oldVal);
      },
      deep:true,
  },
  'superParams.test.testLevel1':{
      immediate:true, // 将立即以表达式的当前值触发回调
      handler:function (val,oldVal) {
          console.log("监听testLevel1属性");
          console.log(val,oldVal);
      },
      deep:true,
  },
  'superParams.test.testLevel1.testLevel2':{
      immediate:true, // 将立即以表达式的当前值触发回调
      handler:function (val,oldVal) {
          console.log("监听testLevel1属性");
          console.log(val,oldVal);
      },
      deep:true,
  },
  'superParams.testList':{
      immediate:true, // 将立即以表达式的当前值触发回调
      handler:function (val,oldVal) {
          console.log("监听testList数组");
          console.log(val,oldVal);
      },
      deep:true,
  }
}
3.3 另外一个子组件触发父组件数据变化（同/不同层级都可以触发）
// 子组件：childrenComponent2
inject: ['superParams'],
mounted(){
   this.superParams.test.testLevel1.testLevel2 = 'testLevel22';
   this.superParams.testList.push({test:'test'})
}
举例一（子组件按顺序展示）：先显示childrenComponent2 ，再到childrenComponent1，（下图的数据在childrenComponent1展示后输出）结果如图所示

举例二（子组件都展示, 在父组件或其他地方触发数据更新）

在父组件添加一个按钮点击触发方法代码如下

updateText(){
  console.log("Text数据更新");
  this.test.testLevel1.testLevel2 = 'testLevel22';
  this.testList.push({test:'test'})
}

结果如下图所示

注意

  1. 当前组件监听方法数据作出了改变，但组件却没有更新，这时需在组件本身找更新原因
  2. 组件显示时会对监听方法进行初始化
  3. 对于对象存在多层的监听问题，可监听整个对象
  4. 对于数组会不会存在漏监听的情况，经测试调用数组的pop、push、shift、unshift、splice、sort、reverse等方法时是可以监听到数组的变化
  5. immediate、deep 要了解

补充

针对注意点1，以el-input-number(element ui)组件为例

<el-input-number v-model="item.max" @change="handleChange" :min="0" :key="Math.random()" :max="superParams.max"></el-input-number>

在没有加上 :key=“Math.random()” 前组件并没有随着父组件数据(superParams.max)变化

加上后可根据父组件数据动态改变

父组件改变参数值代码如下图所示

'formData.isTrue':function (val,oldVal) {
 if(val){
   this.max = 100;
 }else {
   this.max = 50;
 }
},

并不是所有组件都能用 :key=“Math.random()” ，某些组件使用后会出现卡顿或者无法输入值

作出vuespanclasstokenvue.jsjavascript前端

有关vue子组件监听父组件数据变化并作出改变（亲测有效）的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby - 如何进行排列以有效地定制输出 - 2

    这是一道面试题，我没有答对，但还是很好奇怎么解。你有N个人的大家庭，分别是1,2,3,...,N岁。你想给你的大家庭拍张照片。所有的家庭成员都排成一排。“我是家里的friend，建议家庭成员安排如下:”1岁的家庭成员坐在这一排的最左边。每两个坐在一起的家庭成员的年龄相差不得超过2岁。输入:整数N，1≤N≤55。输出:摄影师可以拍摄的照片数量。示例->输入:4，输出:4符合条件的数组:[1,2,3,4][1,2,4,3][1,3,2,4][1,3,4,2]另一个例子:输入:5输出:6符合条件的数组:[1,2,3,4,5][1,2,3,5,4][1,2,4,3,5][1,2,4,5,3][

  3. ruby - Ruby 有 `Pair` 数据类型吗？ - 2

    有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？ 最佳

  4. ruby-on-rails - 启用 Rack::Deflater 时 ETag 发生变化 - 2

    在启用Rack::Deflater来gzip我的响应主体时偶然发现了一些奇怪的东西。也许我遗漏了一些东西，但启用此功能后，响应被压缩，但是资源的ETag在每个请求上都会发生变化。这会强制应用程序每次都响应，而不是发送304。这在没有启用Rack::Deflater的情况下有效，我已经验证页面源没有改变。我正在运行一个使用thin作为Web服务器的Rails应用程序。Gemfile.lockhttps://gist.github.com/2510816有没有什么方法可以让我从Rack中间件获得更多的输出，这样我就可以看到发生了什么？提前致谢。 最佳答案

  5. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  7. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

  8. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

  9. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  10. STM32读取串口传感器数据（颗粒物传感器，主动上传） - 2

    文章目录1.开发板选择*用到的资源2.串口通信（个人理解）3.代码分析（注释比较详细）1.主函数2.串口1配置3.串口2配置以及中断函数4.注意问题5.源码链接1.开发板选择我用的是STM32F103RCT6的板子，不过代码大概在F103系列的板子上都可以运行，我试过在野火103的霸道板上也可以，主要看一下串口对应的引脚一不一样就行了，不一样的就更改一下。*用到的资源keil5软件这里用到了两个串口资源，采集数据一个，串口通信一个，板子对应引脚如下：串口1，TX：PA9，RX：PA10串口2，TX：PA2，RX：PA32.串口通信（个人理解）我就从串口采集传感器数据这个过程说一下我自己的理解，

随机推荐