vue2组件通信中的一些拓展(props,emit,ref父子双向传参)
说明
我上一篇文章中基本对vue所有的数据通信方法进行了一个整理归纳。
其实我并没有像传统的那样去罗列,比如父传子有props,ref,子传父为emit,兄弟用$bus等等。
因为在我的实际练习和业务开发中,props,emit,ref等可以实现父子数据互传,这里就涉及一个比较重要的编程思维,函数式编程。
当我们使用props传递一个函数呢,那么子组件调用这个函数时,将参数传入这个函数的调用,那么在父组件中定义的函数不就可以直接获取到了子组件中数据了吗。
其余的两个也是同理,记住,传参有两种,一种是常规变量,一种是函数,传递什么决定了你的功能。
看代码:
props实现父子双向传参:
父组件
<template><div><p>父组件数字值1:{{ numValue1 }} <el-button @click="addNum">增加</el-button></p><p>获取子组件的值:{{ numValue2 }}</el-button></p><hr /><PropsChild :numValue1="numValue1" :numValue2="getChildValue"></PropsChild></div>
</template>
<script>
import PropsChild from './child.vue'
export default {name: 'propsTest',components: {PropsChild},data() {return {numValue1: 0,numValue2: '父组件默认的值'}},methods: {addNum() {this.numValue1++},getChildValue(childValue) {console.log(childValue, '???子组件的数值')this.numValue2 = childValue},getChildValueFun() {}}
}
</script>
<style lang="less"></style>
子组件
<template><div><p>子组件数值:{{ numValue1 }}</p><el-input v-model="value" @input="numValue2" class="inputBox"></el-input></div>
</template>
<script>
export default {name: 'propsChild',props: {numValue1: {type: Number,require: true,default: 0},numValue2:{type:Function,default:()=>{}}},data(){return{value:'子组件本身的值'}}}
</script>
<style lang="less">
.inputBox{width:300px;margin-top:16px;
}
</style>
$emit实现父子双向传参
父组件
<template><div>父组件<el-input v-model="value" @input="changeInput"></el-input><hr><EmitChild @getChildValue="getChildValue"></EmitChild></div>
</template>
<script>
import EmitChild from './child.vue'export default{name:'emitTest',data(){return{value:'父组件默认的值',childFun:()=>{}}},components:{EmitChild},mounted(){},methods:{getChildValue(childValue){if(typeof childValue === 'function'){this.childFun = childValue}else{this.value = childValue}},changeInput(value){this.childFun(value)}}}
</script>
<style lang="less"></style>
子组件
<template><div>子组件<el-input v-model="value" @input="changeValue"></el-input></div></template><script>export default{name:'emitChild',data(){return{value:'子组件默认的值'}},mounted(){this.$emit('getChildValue',this.emitFun)},methods:{changeValue(){this.$emit('getChildValue',this.value)},emitFun(value){this.value = value}}}</script><style lang="less"></style>
$ref实现父子双向传参
父组件
<template><div><p>父组件的值:{{ value }} <el-button @click="addNum">增加</el-button> </p><hr><Child ref="child"></Child></div>
</template>
<script>
import Child from './child.vue'export default{name:'refTest',components:{Child},data(){return{value:0}},mounted(){this.$refs.child.getFun(this.funHandler)},methods:{addNum(){this.value++this.$refs.child.getValue(this.value)},funHandler(value){this.value = value}}}
</script>
子组件
<template><div>子组件的值{{ value }}<el-button @click="add">增加</el-button></div>
</template>
<script>export default{name:'refTest',data(){return{value:0,funHandler:()=>{}}},methods:{getValue(val){this.value = val},getFun(funHandler){this.funHandler = funHandler},add(){this.value ++this.funHandler(this.value)}}}
</script>
结束语
虽然在开发中,大部分人都会按照既定思维,props和ref父传子,emit子传父,但是我们是开发者,需要有更多的思维在里面,你可以不用,但是你需要去思考,去尝试。
vue和react等框架本身就大量使用了函数式编程的思想,作为使用者的我们,也要同样的将这种思想运用进去,才会有更多优质的代码,才回提升自己。
相关文章:
vue2组件通信中的一些拓展(props,emit,ref父子双向传参)
说明 我上一篇文章中基本对vue所有的数据通信方法进行了一个整理归纳。 其实我并没有像传统的那样去罗列,比如父传子有props,ref,子传父为emit,兄弟用$bus等等。 因为在我的实际练习和业务开发中,props,emit,ref等可以实现父子数据互传,这里就涉及一个比较重要的编程思维,函…...
Flink1.17 DataStream API
目录 一.执行环境(Execution Environment) 1.1 创建执行环境 1.2 执行模式 1.3 触发程序执行 二.源算子(Source) 2.1 从集合中读取数据 2.2 从文件读取数据 2.3 从 RabbitMQ 中读取数据 2.4 从数据生成器读取数据 2.5 …...
数据结构中树、森林 与 二叉树的转换
1 树转换为 二叉树 将树转换成二叉树的步骤是: 加线。在所有的兄弟结点之间加一条线。去线。对于树中的每个结点,只保留它与第一个孩子结点的连线,删除该结点其他孩子结点之间的连线。调整。以树的根结点为轴心,将整个树顺时针旋…...
力扣labuladong——一刷day43
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、力扣257. 二叉树的所有路径二、力扣129. 求根节点到叶节点数字之和三、力扣199. 二叉树的右视图四、力扣662. 二叉树最大宽度 前言 一般来说,如…...
MapApp 地图应用
1. 简述 1.1 重点 1)更好地理解 MVVM 架构 2)更轻松地使用 SwiftUI 框架、对齐、动画和转换 1.2 资源下载地址: Swiftful-Thinking:https://www.swiftful-thinking.com/downloads 1.3 项目结构图: 1.4 图片、颜色资源文件图: 1.5 启动图片配置图: 2. Mo…...
Java之反射获取和赋值字段
在Java中,反射能够使得代码更加通用,往往用于工具类中。 但常常我们在获取或者赋值反射的属性时,会出现没有赋值成功的结果,往往是由于这个属性在父级中而导致的,这个时候我们就不能用getDeclaredField方法单独获取字段…...
ckplayer自己定义风格播放器的开发记录
CKplayer是一款基于Flash和HTML5技术的开源视频播放器,支持多种格式的音视频播放,并且具有优秀的兼容性和扩展性。 它不仅可以在网页上播放本地或者网络上的视频,还可以通过代码嵌入到网页中,实现更加个性化的播放效果。CKplayer…...
全网最全Django面试题整理(一)
Django 中的 MTV 是什么意思? 在Django中,MTV指的是“Model-Template-View”,而不是常见的MVC(Model-View-Controller)架构。Django的设计理念是基于MTV的 Model(模型) 模型代表数据存取层&am…...
vue统一登录
说明: 统一登录其实就是前端去判断Url地址的token 之后如果有token未过期就直接跳转到首页。 说到浏览器输入url地址,那从浏览器输入地址一共发生了几件事大致如下: DNS解析域名,获取IP地址 --》 建立TCP连接(三次握…...
MVSNet论文笔记
MVSNet论文笔记 摘要1 引言2 相关基础2.1 多视图立体视觉重建(MVS Reconstruction)2.2 基于学习的立体视觉(Learned Stereo)2.3 基于学习的多视图的立体视觉(Learned MVS) 3 MVSNet3.1 网络架构3.2 提取图片…...
大型 APP 的性能优化思路
做客户端开发都基本都做过性能优化,比如提升自己所负责的业务的速度或流畅性,优化内存占用等等。但是大部分开发者所做的性能优化可能都是针对中小型 APP 的,大型 APP 的性能优化经验并不会太多,毕竟大型 APP 就只有那么几个&…...
K8S配置资源管理
这里写目录标题 K8S配置资源管理一.Secret1.介绍2.Secret 有四种类型3.创建 Secret4.使用方式 二.ConfigMap1.介绍2.创建 ConfigMap3.Pod 中使用 ConfigMap4.用 ConfigMap 设置命令行参数5.通过数据卷插件使用ConfigMap6.ConfigMap 的热更新7.ConfigMap 更新后滚动更新 Pod K8S…...
Redis 的集群模式实现高可用
来源:Redis高可用:武林秘籍存在集群里,那稳了~ (qq.com) 1. 引言 前面我们已经聊过 Redis 的主从同步(复制)和哨兵机制,这期我们来聊 Redis 的集群模式。 但是在超大规模的互联网应用中,业务规…...
21、嵌套路由实战操作
1、创建内嵌子路由,你需要添加一个vue文件,同时添加一个与该文件同名的目录用来存放子视图组件。 2、在父组件(.vue)内增加用于显示子视图内容 新建文件 pages\index_id.vue 生成的对应路由 {path: "/",component: _…...
WPF 控件的缩放和移动
WPF 控件的缩放和移动 1.页面代码 <ContentControl ClipToBounds"True" Cursor"SizeAll"><Viewboxx:Name"viewbox"MouseDown"viewbox_MouseDown"MouseMove"viewbox_MouseMove"MouseWheel"Viewbox_MouseWhee…...
Python and和or的优先级实例比较
Python and和or的优先级 and和or都是Python的逻辑运算符,都为保留字。通常情况下,在没有括号影响,and和or的优先级中and在代码的逻辑运算过程中会相对优先一些,及在同一行的Python代码中,and会优先与or执行。下面将通…...
数据结构与算法编程题2
逆置线性表,使空间复杂度为 O(1) #include <iostream> using namespace std;typedef int ElemType; #define Maxsize 100 #define OK 1 #define ERROR 0 typedef struct SqList {ElemType data[Maxsize];int length; }SqList;void Init_SqList(SqList& …...
Java开发者的Python快速进修指南:控制之if-else和循环技巧
简单介绍 在我们今天的学习中,让我们简要了解一下Python的控制流程。考虑到我们作为有着丰富Java开发经验的程序员,我们将跳过一些基础概念,如变量和数据类型。如果遇到不熟悉的内容,可以随时查阅文档。但在编写程序或逻辑时&…...
二进制部署k8s集群-过程中的问题总结(接上篇的部署)
1、kube-apiserver部署过程中的问题 kube-apiserver.conf配置文件更改 2、calico的下载地址 curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O 这里如果kubernetes的节点服务器为多网卡配置会产生报错 修改calino.yaml配置文件 解决方法: 调…...
IOS 关于CoreText的笔记
放大 一.CoreText计算attributeString显示所占区域 百度搜索有三种方法: 1.方法 - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options context:(nullable NSStringDrawingContext *)context 2.使用CTFrameRef 的 CTFrameGetLin…...
Z-Image-Turbo-辉夜巫女快速入门:10分钟完成Dify工作流集成与调用
Z-Image-Turbo-辉夜巫女快速入门:10分钟完成Dify工作流集成与调用 想在自己的应用里快速加上AI画图功能,但又不想写一堆复杂的代码?今天咱们就来聊聊怎么把Z-Image-Turbo-辉夜巫女这个挺火的图像生成模型,轻松集成到Dify平台的工…...
3步轻松下载B站视频:BilibiliDown图形化下载器完整指南
3步轻松下载B站视频:BilibiliDown图形化下载器完整指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/…...
电容耦合等离子刻蚀(CCP)在先进芯片制造中的关键作用与工艺优化
1. 电容耦合等离子刻蚀(CCP)技术解析 第一次接触CCP刻蚀设备时,我被它那看似简单却暗藏玄机的结构震撼到了——两块金属电极板,加上射频电源,就能实现纳米级的精密加工。这种利用电容耦合原理产生等离子体的技术&#…...
BilibiliDown:让B站视频下载变得简单高效
BilibiliDown:让B站视频下载变得简单高效 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/bi/BilibiliDo…...
NCNN+OpenCV+Vulkan三件套:Windows环境下的深度学习加速实战教程
NCNNOpenCVVulkan三件套:Windows环境下的深度学习加速实战教程 在深度学习模型部署的战场上,Windows平台往往被开发者视为"次优选择"——直到NCNN、OpenCV和Vulkan这个黄金组合的出现。这个三件套解决方案正在改变游戏规则:NCNN提供…...
基于python的演唱会门票演出购票系统的设计与实现
目录同行可拿货,招校园代理 ,本人源头供货商用户管理模块演出信息管理购票与选座功能支付系统集成订单与票务管理数据分析与报表高并发优化项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作同行可拿货,招校园代理 ,本人源头供货商…...
解锁知识:9种突破信息壁垒的创新方案
解锁知识:9种突破信息壁垒的创新方案 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代,高效的"信息获取"与"资源解锁"…...
Ryzen SDT调试工具:解锁AMD处理器潜能的系统级配置平台
Ryzen SDT调试工具:解锁AMD处理器潜能的系统级配置平台 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://g…...
ZYNQ PS侧DDR3内存配置避坑指南:以ACZ702开发板为例,手把手教你搞定MT41K128M16
ZYNQ PS侧DDR3内存配置实战:从硬件原理到Vivado参数设置全解析 当你第一次拿到ACZ702这样的ZYNQ开发板,准备配置PS侧的DDR3内存时,是否遇到过这样的困惑:为什么在Vivado中找不到DDR管脚约束选项?为什么按照传统FPGA的D…...
深入解析Jinja2模板引擎:render与generate函数的实战应用
1. Jinja2模板引擎基础入门 第一次接触Jinja2时,我完全被它的简洁和强大震撼到了。这个由Armin Ronacher开发的模板引擎,最初是为了解决Django模板的局限性而诞生的。经过多年发展,它已经成为Python生态中最受欢迎的模板引擎之一。 安装Jinja…...
