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

news2024/11/16 21:49:35

接着上篇的 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 可以减少组件之间的耦合性,使组件更加独立和可重用,同时也可以使代码更加清晰和易于维护,因为可以清晰地看到哪些组件在发送和接收事件,以及这些事件是如何在组件树中传播的。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一文搞懂Log4j2的同步日志打印

前言 Log4j2诞生于2012年,是Apache推出用于对标Logback的日志框架,本篇文章将对Log4j2的同步日志打印的源码进行学习。 Log4j2版本:2.17.1 正文 一. Logger获取 通常,使用Slf4j的LoggerFactory获取Log4j2的Logger的代码如下所…

无插件网页视频播放器,支持图像绘制(包含方格子、方框等),支持音视频播放、支持录像截图,提供源码下载

前言 本播放器内部采用jessibuca插件接口,支持录像、截图、音视频播放等功能。播放器播放基于ws流,图像绘制操作:1)支持绘制方格子,用于监控移动检测画框;2)支持绘制不透明方框,用于…

ExoPlayer架构详解与源码分析(11)——DataSource

系列文章目录 ExoPlayer架构详解与源码分析(1)——前言 ExoPlayer架构详解与源码分析(2)——Player ExoPlayer架构详解与源码分析(3)——Timeline ExoPlayer架构详解与源码分析(4)—…

探索SDK技术架构:构建高效稳定的开发工具

随着移动应用和软件开发的不断发展,SDK(Software Development Kit)已经成为开发者们日常工作中不可或缺的利器。SDK作为一种开发工具包,能够提供丰富的功能和接口,帮助开发者加快应用开发的速度,提升软件质…

【Web应用技术基础】HTML(6)——案例2:填写简历信息

样式&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>填写简历信息&…

探索uni-app项目的架构与开发实践:快速开发的项目模板参考

摘要&#xff1a;本文将深入探讨uni-app项目架构的模板设计&#xff0c;以及如何通过使用该模板实现快速开发。我们将重点介绍模板中的组件示例、SDK示例和模板页面&#xff0c;并阐述它们在提高开发效率和优化用户体验方面的作用。 一、引言 随着移动互联网的迅猛发展&#…

环信新版单群聊UIKit集成指南——Android篇

前言 环信新版UIKit已重磅发布&#xff01;目前包含单群聊UIKit、聊天室ChatroomUIKit&#xff0c;本文详细讲解Android端单群聊UIKit的集成教程。 环信单群聊 UIKit 是基于环信即时通讯云 IM SDK 开发的一款即时通讯 UI 组件库&#xff0c;提供各种组件实现会话列表、聊天界…

Jetson AGX ORIN 配置 FGVC-PIM 神经网络

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

UE5制作推箱子动作时获取物体与角色朝向的角度及跨蓝图修改变量

就是脑残死磕&#xff0c;你们如果有更好的方法一定要留言啊~~独乐乐不如众乐乐。 做推箱子的时候需要考虑脸是不是面对着箱子&#xff0c;不是必须90度&#xff0c;可以有一个-45~45度的范围。 摸索了一下&#xff0c;有几种做法和几个小白坑&#xff0c;这里列出来。 一、准…

Etcd Raft 协议(进阶篇)

前言 在正式开始介绍 Raft 协议之间&#xff0c;我们有必要简单介绍一下其相关概念。在分布式系统中&#xff0c;一致性是比较常见的概念&#xff0c;所谓一致性指的是集群中的多个节点在状态上达成一致。在程序和操作系统不会崩溃、硬件不会损坏、服务器不会掉电、网络绝对可靠…

电商系统秒杀二 秒杀场景下如何进行限流

本章学习内容 1、在秒杀页面&#xff0c;客户点击秒杀后&#xff0c;在前台弹出一个验证码&#xff0c;需要用户输入验证码才能往后端发送请求&#xff0c;这样能够错开秒杀下单的时间。 2、通过验证码&#xff0c;对后台下单请求进行保护&#xff0c;防止刷单&#xff0c;即防…

产品推荐 | 基于 Xilinx ZU19/ZU17/ZU11-Zyng Ultrascale+SOM 板卡

一、产品描述 iWare推出基于Xilinx FFVC1760封装的Zynq Ultrascale MPSoC系列SOM板卡&#xff0c;完美兼容ZU19/ZU17/ZU11 EG设备&#xff0c;具备卓越性能&#xff0c;最大内存带宽达64位&#xff0c;搭载8GB PS DDR4 RAM并支持ECC&#xff0c;满足高端应用需求。 二、产品参数…

MySQL主键冲突问题分析处理

目录 背景问题分析分析数据分析代码验证分析结果 原因分析验证MySQL参数解决办法修改MySQL配置参数修改代码 背景 因公司业务及预算调整&#xff0c;系统部署从原有云服务提供商迁移到另外一家云服务提供商&#xff0c;在测试新服务能力的时候&#xff0c;发现应用系统某个功能…

总结: HQL语句

总结: HQL语句 Part1 数据库的操作Part2 数据表的操作1. 创建普通表2. 内外部表3. 内外部表转换 Part1 数据库的操作 查看数据库: show databases; 创建数据库: create database if not exists 数据库名 使用数据库: use 数据库名; 查看数据库详细信息: desc database 数据库名…

通过Anaconda安装Python会得到的重要文件夹

E:\Anaconda\路径下 Scripts 文件夹&#xff1a;该文件夹包含了可执行的Python脚本文件&#xff0c;例如pip和conda等命令行工具。【pip3.exe和django-admin.exe等】Lib 文件夹&#xff1a;该文件夹包含了Python的标准库和其他第三方库的源代码文件。【Lib下面的site-packages…

JVM—内存可见性

什么是可见性 可见性&#xff1a;一个线程对共享变量值的修改,能够及时地被其他线程看到共享变量&#xff1a;如果一个变量在多个线程的工作内存中都存在副本,那么这个变量就是这几个线程的共享变量 Java内存模型(JMM) Java内存模型(Java Memory Model)描述了Java程序中各种…

【滑动窗口】长度最小的子数组|无重复字符的最长子串|最大连续1的个数 III|将 x 减到 0 的最小操作数

1. 长度最小的子数组 - 力扣&#xff08;LeetCode&#xff09; 1.题目解析&#xff1a; 2.算法原理 &#xff08;1&#xff09;方法一&#xff1a;暴力列举出所有的子数组的和 时间复杂度&#xff1a;O&#xff08;n**2&#xff09;&#xff1a;枚举所有子数组O&#xff08;…

Linux信号处理

Linux信号处理 什么是linux信号 本质是一种通知机制&#xff0c;用户 or 操作系统通过发送一定的信号&#xff0c;通知进程&#xff0c;某些事情已经发生&#xff0c;你可以在后续进行处理。 信号产生是随机的&#xff0c;进程可能正在忙自己的事情&#xff0c;所以&#xf…

【LVGL-按钮按钮矩阵部件】

LVGL-按钮&按钮矩阵部件 ■ LVGL-按钮部件■ 按钮部件&#xff1a; 点击三个按钮一个回调函数修改label值。 ■ LVGL-按钮矩阵部件■ 示例一&#xff1a;按钮换行&#xff0c;和宽度设置。■ 示例二&#xff1a;设置按钮宽度为2倍■ 示例三&#xff1a;获取点击的按钮下标&…

Deep_Learning_readme

本文目录 1.环境安装2. A1-1实验&#xff1a;3. A1-2实验&#xff1a;4. A1-3实验 &#xff1a;**5. A2-CNN实验****6. A3-RNN实验** &#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;提示&#xff1a;全程路径和环境名字不…