父组件不通过事件监听子组件变化并取值

最新推荐文章于 2024-06-04 09:24:28 发布
最新推荐文章于 2024-06-04 09:24:28 发布
阅读量510 收藏
点赞数
文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50803529/article/details/108681347
版权

父组件不通过事件监听子组件变化并取值

背景介绍：

最近在做一个版本数据管理系统，父组件中计算版本总分，需要从子组件中获取交付物得分、抽测得分（及验收得分）。之前学习vue的时候子父通信一般使用emit进行监听和传值，现在需求不需要添加emit事件、实现实时、动态的获取子组件的值。

一、子组件中添加监听

首先在子组件中监听关联输入框的值，用钩子函数beforeUpdate，在重新渲染之前将值提交到store。
注意：不能用updated，否则改变数据会导致无限循环
在这里插入图片描述

二、将数据传到store

在store中用数组装载子组件的值，这里考虑到两点：1、无法确定有多少个子组件的值；2、可以替换元素。
对应两点考虑：1、已知有2-3个需求，因此我设定数组有3个元素。2、数组可以用splice方法进行元素替换
在这里插入图片描述

三、getters返回值

这里需要返回数组所有元素的合，即版本总分

最低0.47元/天 解锁文章
return henry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中父子组件的传值
木木木华的博客
02-07 854
vue中父子组件的传值 1. 父组件给子组件传值 主要两个步骤： 1. 在父组件调用子组件的时候绑定数据 2. 在子组件里面通过props接收父组件传过来的数据 2. 子组件给父组件传值 主要三个步骤： 1.在子组件中创建一个按钮，给按钮绑定一个点击事件 2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数。 3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法。 看代码： 首先看父组件： <template> <div class="F
WPF INotifyPropertyChanged示例，数据绑定到控件，控件内容随变量的变化而变化
11-02
本INotifyPropertyChanged示例中，将一个类变量（Student）绑定到一个控件上，在代码中改变变量值，并立刻引起控件值的变化。此代码经过删减，仅仅保留精简内容，添加注释，简洁明了。 调试环境：Visual Studio 2017+C#4.61
子组件未抛出事件 父组件如何通过$refs监听子组件中数据的变化 在父生命周期中$watch监听子组件数据变化
greed
07-30 1301
我们平时开发项目会使用一些比较成熟的组件库, 但是在极小的情况下,可能会出现我们需要监听某个属性的变化,使我们的页面根据这个属性发生一些改变,但是偏偏组件库没有把这个属性抛出来,当我们使用watch通过refs监听时,由于生命周期的原因还不能拿到,这时候我们可以这样做,以下是一个极简的例子。
Vue3：在父组件监听子组件的值的变化，并在父组件接收
最新发布
yyyyyyyyyyy_9的博客
06-04 811
在 Vue 3 中，可以通过使用watch函数来监听父组件中的。watch函数允许你在某个数据属性发生变化时执行相应的操作。这里是如何在父组件中监听。
vue在父组件中获取子组件的数据
qq_41588568的博客
06-02 4947
刚开始使用this.$emit事件，但是子组件没办法触发事件，所以使用这种方法无法获取子组件的数据。 今天偶然发现，原来可以直接使用下边的方法获取，简单好用 这是我的子组件： 父组件： 使用： 效果： 总结： 即在调用子组件的时候定义一个ref，然后使用this.$refs.child.属性 ...
vue 子传父 （父组件拿子组件的值）
weixin_53587375的博客
09-27 156
1.父组件拿子组件的值 2.通过ref获取子组件的值，父组件写点击事件，子组件ref起个名字 3.通过 this.$refs.blindsamplData.form 拿到子组件data.form表单里的值 4.yyds
vue之组件传值(父子、子父以及非父子)
楠姐的博客
07-22 402
vue组件传值分为以下几种情况 父向子组件传值 子向父组件传值 非父子组件传值 1. 父向子组件传值 父组件通过绑定属性 传值 子组件通过props接收值 //父组件代码 <template> <div class="parentOne"> <children :content="123" > </children> </div> </template> //子组件代码 <
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
08-27
解决父组件中Vuex方法更新state子组件不能及时更新并渲染的问题，我们可以使用传值的方法将父组件的状态值传递给子组件，然后在子组件中使用watch或computed属性来监听页面的变化，并获取最新的状态值。
Vue.js移动端左滑删除组件的实现代码
10-19
`.slider`通过监听`@touchstart`、`@touchmove`和`@touchend`事件来处理触摸操作，而`.remove`是实际的删除按钮。为了实现平滑的滑动效果，我们可以设置CSS的`transition`属性。 在样式方面，`.slider`和`.content`...
vue2组件之select2调用的示例代码
08-29
同时，我们还使用watch函数来监听Vue实例中的数据变化，并在数据变化时触发Select2的change事件。 data-vuep的作用 在示例代码中，我们使用了data-vuep属性来保存Select2与Vue实例中的对应关系。例如，在Select2的...
COM组件中WindowsMediaPlayer的主属性和事件用法
10-05
COM组件中的WindowsMediaPlayer是Microsoft提供的一种强大的多媒体播放控件，它可以用于在应用程序中集成音频、视频...在实际应用中，还可以结合事件处理来实现更复杂的交互逻辑，如监听播放状态变化以执行相应的操作。
Vue数字输入框组件使用方法详解
11-20
在组件中，我们需要监听用户操作按钮的事件，如点击加号和减号按钮，这时会触发自定义事件，如`input`，并将新的值传递给父组件。 3. **组件间通信（Component Communication）**： - `props`：父组件向子组件传递...
Vue父子组件之间的传值及父子组件之间相互调用属性或方法
weixin_45995139的博客
08-10 2783
父组件向子组件传值：通过属性传入，子组件通过props定义与传入属性相同的变量接收；子组件向父组件传值：通过子组件的$emit自定义事件，父组件通过监听子组件定义的事件获取子组件传的值；...
Vue父组件数据变化子组件不能及时响应的解决办法【watch监听】
什么都干的派森
01-17 6553
针对子组件不跟随父组件的值进行更新的这个问题，根据父组件传入的是值还是对象，可以分成以下两种解决办法。
vue 父组件监听子组件的数据变化 父组件监听子组件的data
qq_41287158的博客
01-17 3443
vue 父组件监听子组件的数据变化 父组件监听子组件的data
Vue父组件向子组件传值，且要监听该值的变化
热门推荐
weixin_43842567的博客
05-29 1万+
vue父组件向子组件传值时，如果值会根据父组件的相关操作而变化，则需要在子组件里用watch对其进行监听 1、父组件 <template> <div> <air-station :value="value"></air-station> </div> </template> import AirStatio...
Vue父组件监听子组件值变化
weixin_46003800的博客
04-22 6189
子组件组件 1.通过this.$emit(‘方法’,监听的值) this.$emit('changeName',this.nackName) 2.父组件 // 子组件 <component @changeName="nickName" /> // 父组件方法 methods:{ nickName(name) { // 给需要的地方赋值 this.texts = name; }, }, ...
Vue父组件监听子组件的方法并接收子组件的传值
qq_25983579的博客
11-13 8708
1.需求 1.1 需求描述 子组件是一个字典表的下拉选择器，父组件需要根据子组件选择的不同内容展示不同的效果 1.2 需求分析 父组件需要去监听子组件的事件，并接收子组件的传值。 2.解决方法 2.1 子组件的代码 template模板代码 <template> <div> <el-select class="width100" v-model="sele...
Angular4 父组件监听子组件数据变化
strong90的博客
05-29 4061
// 引入import { ......, OnChanges, SimpleChanges } from '@angular/core';// 获取更新的变化 ngOnChanges(changes: SimpleChanges) { console.log('changes---',changes); }
uniapp子组件取值父组件
08-19
父组件监听这个事件，并在事件处理函数中接收传递的值。通过这种方式，子组件可以将值传递给父组件。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2*...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值