element-ui radio-group 组件源码分享

接着上篇的 radio 组件源码分享,继续探索 radio-group 源码部分的实现过程,主要从以下四个方面来讲解:

1、el-radio-group 页面结构

2、el-radio-group 组件属性

3、el-radio-group 组件方法

4、核心代码部分

一、页面结构,如下:

1.1 el-radio-group 是一个容器组件,主要配合 el-radio 组件一起使用,通过下图可能看到,可在容器组件内部挂载内容。

1.2 component  中 _elTag 简单梳理,如下:

针对于 _elTag  这个方法,我的疑惑是 this.$vnode.data 这部分,我曾尝试过很多种方法改变组件内部 tag 的默认值,但一直未果,简单的结论是为了组件的灵活性、可拓展性等。

二、el-radio-group 组件属性

2.1 value / v-model 属性,string / number / boolean,无默认值

源码中分两部分:

1、el-radio-group 里面 挂载 el-radio

2、el-form 里面嵌套 el-radio-group

2.1.1 当 el-radio-group 不在 form 中时,对应的源码部分的实现如下: 

上面这种 api 写法,会触发下面这两部分的代码,如下:

2.1.2 当 el-radio-group 在 form 表单中时,对应的源码部分的实现如下:

三、el-radio-group 组件方法

3.1 handleChange方法

四、核心代码

 在 emitter.js 中有 dispath 这样一个公共的方法,在 radio、radio-group、radio-button源码当中都有涉及,那么这个方法是什么呢?又有什么作用呢?带着这两个问题,我们来研究一下下面这段代码。如图:

问题一:dispatch 是什么?

它是源码中封装的公共的方法,有三个参数,分别是:

componentName 要查找的父组件的名称;

eventName:要在找到的父组件上触发的事假名称;

params:要传递给事假的参数数组。

问题二、dispatch 有什么作用?

它提供了一种在 Vue 组件树中向上传递信息的机制,特别是当组件之间的层次结构复杂且需要跨越多层组件进行通信时,使用 dispatch 可以避免在组件之间通过直接使用 props 层层传递数据,尤其在需要跨越多层组件时,这种方式坑会变得非常繁琐和难以维护。dispatch 提供了一种解决方案,允许组件向其上层特定组件发送事件,简化跨组件通信的过程。使用 dispatch 可以减少组件之间的耦合性,使组件更加独立和可重用,同时也可以使代码更加清晰和易于维护,因为可以清晰地看到哪些组件在发送和接收事件,以及这些事件是如何在组件树中传播的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/489002.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

成都伊理威:抖音开网店如何找好货源

在数字浪潮的推动下,抖音已成为创业者开展电子商务的热土。开设一家抖音网店,如何找寻优质的货源成为成功的关键一环。选择货源,犹如为网店插上腾飞的翅膀,既要注重品质,也要考虑成本,确保产品能够在激烈的…

jspssm_maven项目——KTV点歌系统

目录 背景 技术简介 系统简介 界面预览 背景 随着互联网的广泛渗透和进步,基于网络技术的KTV点歌系统迅速壮大,其发展始终围绕用户的实际需求展开。通过深入洞察用户的需求,开发出高度定制的管理平台,利用网络的便捷性对系统…

【晴问算法】入门篇—字符串处理—首字母大写

题目描述 给定一堆用空格隔开的英文单词,将每个单词的首字母改为大写后输出。输入描述 一堆英文单词,每个单词不超过10个字符,且仅由小写字母组成;每两个单词之间用一个空格隔开,整个字符串的长度不超过1000。输出描述 输出每个单…

基于React的低代码平台开发实践

💂 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】🤟 一站式轻松构建小程序、Web网站、移动应用:👉在线地址🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交…

浏览器输入框自动填充默认样式移除

文章目录 浏览器输入框自动填充默认样式移除问题现象以及探索过程尝试代码有效关键代码(解决方案) 浏览器输入框自动填充默认样式移除 问题现象以及探索过程 (在 uniapp 语法下)本文的写法在 Edge 119.0.2151.58 (正式版本) (64 …

爱校对:网站内容的温暖守护者

在这个快速变化的信息时代,网站如同一个生动的生态系统,每时每刻都在更新和进化。但是,随之而来的是一个挑战:如何确保这个生态系统中的每一条信息都是准确、合法、并且对用户友好呢?这就是我们,爱校对网站…

​企业是否需要向个人信息主体提供《标准合同》副本文件?​

企业是否需要向个人信息主体提供《标准合同》副本文件? 目前未见有规定强制要求企业需要主动向个人信息主体提供《标准合同》的副本文件,但个人信息主体具有要求个人信息处理者提供其所签订的《标准合同》副本的权利,企业必须配合。在提供副…

Jetson AGX ORIN 配置 FGVC-PIM 神经网络(包含 arm64 下面 torch 和 torchvision 配置内容)

Jetson AGX ORIN 配置 FGVC-PIM 神经网络 文章目录 Jetson AGX ORIN 配置 FGVC-PIM 神经网络配置 ORIN 环境创建 FGVC-PIM 虚拟环境安装 PyTorch安装 torchvision安装其他依赖包 配置 ORIN 环境 首先先配置 ORIN 的环境,可以参考这个链接: Jetson AGX …

【考研数学】张宇全程学习包

可以全程张宇老师的高等数学,张宇老师的拿手绝活是高数 但是其他科目,还有更好的选择,比如线性代数,汤家凤老师还有李永乐老师讲的都不错,概率论,余丙森老师还有方浩老师讲的很好。下面我就讲清楚&#xf…

1978-2022年全国及31省市农业机械总动力(万千瓦)(无缺失)

1978-2022年全国及31省市农业机械总动力(万千瓦)(无缺失) 1、时间:1978-2022年 2、范围:全国及31省 3、来源:整理自各省年鉴 中国农业统计年鉴、国家统计局 4、指标:农业机械总动…

云电脑火爆出圈,如何选择和使用?--腾讯云、ToDesk云电脑、青椒云使用评测和攻略

前言: Hello大家好,我是Dream。在当下,科技的飞速发展已经深入影响着我们的日常生活,特别是随着物联网的兴起和5G网络的普及,云计算作为一个重要的技术概念也逐渐走进了我们的视野。云计算早已不再是一个陌生的名词&am…

基于nodejs+vue电子产品销售系统设计与实现python-flask-django-php

该系统采用了nodejs技术、express框架,连接MySQL数据库,具有较高的信息传输速率与较强的数据处理能力。包含管理员和用户两个层级的用户角色,系统管理员可以对个人中心、用户管理、产品类别管理、电子产品管理、留言板管理、系统管理、订单管…

MySQL数据库备份策略与实践详解

目录 引言 一、MySQL数据库备份的重要性 (一)数据丢失的原因 (二)数据丢失的后果 二、MySQL备份类型 (一)根据数据库状态 (二)根据数据的完整性 (三)…

【Linux】Linux查看物理CPU个数、核数、逻辑CPU个数,以及内存情况

总核数 物理CPU个数 X 每颗物理CPU的核数 总逻辑CPU数 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 查看物理CPU个数 cat /proc/cpuinfo| grep "physical id"| sort| uniq| wc -l显示这台机器有2块CPU 查看每个物理CPU中core的个数(即核数) cat /proc/cpuinfo|…

【SpringBoot】实现一个简单的图片上传

前端上传表单 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <form enctype"multipart/form-data" method"post" action&q…

约数个数(数论,蓝桥杯)

题目描述&#xff1a; 给定一个数n&#xff0c;再给出n个数&#xff0c;现在要求你求出这些数的乘积的约数个数总和&#xff0c;结果对1e97取模。 取值范围&#xff1a;1<n<100; 1<ni<2e9; 分析步骤&#xff1a; 第一&#xff1a;要求约数的个数&#xff0c;我们有…

2.8、下拉刷新与上拉加载

页面的下拉刷新与上拉加载功能在移动应用中十分常见,例如,新闻页面的内容刷新和加载。这两种操作的原理都是通过响应用户的触摸事件,在顶部或者底部显示一个刷新或加载视图,完成后再将此视图隐藏。 实现思路 以下拉刷新为例,其实现主要分成三步: 监听手指按下事件,记录…

注意力机制篇 | YOLOv8改进之添加CBAM注意力机制

前言:Hello大家好,我是小哥谈。CBAM是一种用于图像分类的注意力机制,全称为Convolutional Block Attention Module。它可以自适应地学习每个通道和空间位置的重要性,从而提高模型的性能。CBAM由两个部分组成:通道注意力模块和空间注意力模块。通道注意力模块通过学习每个通…

fl破解补丁下载2024FL Studio v21.1.1.3750 Crack永久下载和使用激活图文教程

FL Studio21简介 各位&#xff0c;大家晚上好&#xff0c;今天给大家带来最新最新2024水果编曲软件FL Studio 21中文版下载安装激活图文教程。我们一起先了解一些FL Studio 。FL Studio21是目前流行广泛使用人数最多音乐编曲宿主制作DAW软件&#xff0c;这款软件相信广大网友并…

java 溯本求源之基础(七)之 jar(上篇)

这个命令一些相关的知识点很重要&#xff01;很重要&#xff01;很重要&#xff01;重要的事情说三遍&#xff0c;再说这个工具之前我们先把相关东西一口气说完 1.类是如何加载的 1.1类加载的顺序&#xff1a; Bootstrap classes&#xff1a; 这个我们更可以理解为引导类&am…