echarts 整数转换 k8s unity3d variables gwt vuejs2 sdk architecture nuget Draggabilly vue滑动事件 后台管理界面 jquery遍历元素 jquery获取下一个元素 最新更新国内最快的dns java反射方法 查看rabbitmq版本 matlab中不等于怎么表示 plsql连接mysql数据库 kubernetes安装 python练习 python最大值 python语言入门 python写文件 java接口 java中的基本数据类型 java匿名对象 java怎么写接口 javaenum java重命名 javaspring java中collection linux镜像安装 谷歌地球打不开 网络是怎样连接的 saminside 网络工程师教程 摩尔斯电码翻译器在线 明解c语言
当前位置: 首页 > 学习教程  > 编程语言

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

2020/9/19 15:27:22 文章标签:

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

    • 背景介绍:
    • 一、子组件中添加监听
    • 二、将数据传到store
    • 三、getters返回值
    • 四、父组件调用getters

背景介绍:

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

一、子组件中添加监听

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

二、将数据传到store

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

三、getters返回值

这里需要返回数组所有元素的合,即版本总分
在这里插入图片描述

四、父组件调用getters

最后就可以在父组件中调用getters,动态获取总分

在这里插入图片描述

以上是本人在这个需求中的所学心得,也欢迎各位大佬指出不足之处,大家共同进步~

本文链接: http://www.dtmao.cc/news_show_200246.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?