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

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

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

相关文章

docker 不同架构镜像融合问题解决

1、背景 docker 作为目前容器的标准之一,但是对于多种架构的平台的混合编译支撑不是很好。因此衍生了镜像融合,分别将多种不同的架构构建好,然后将镜像进行融合上传。拉取镜像的会根据当前系统的架构拉取不同的镜像,也可以通过 -…

Linux内核err.h文件分析

在阅读和编写内核相关的代码时,经常会看到IS_ERR、ERR_PTR等函数。这些函数在内核头文件的err.h中。以我服务器的代码为例,内核版本为5.15。 这个文件的代码如下: /* SPDX-License-Identifier: GPL-2.0 */ #ifndef _LINUX_ERR_H #define _L…

基于nodejs+vue在线作业管理系统的设计与实现python-flask-django-php

这种个性化的网络系统管理更重视相互协调和管理合作,能激发管理者的创造性和主动性,这对在线作业管理系统来说非常有益。 关键词:在线作业管理系统,nodejs语言,express框架, 前端技术:nodejsvueelementui, Express 框架…

2、Spring CLI安装

安装 Spring CLI 提供了多种格式,让您选择自己喜欢的安装方法。可下载的制品可从发布页面获取。 二进制发行版 WindowsLinuxMac手动安装(Windows,其他自己看) spring-cli-standalone-<version>-windows.x86_64.zip - 打包了 x86 JDKspring-cli-installer-<versi…

Rust常用库之序列化和反序列化库serde(使用 Serde 处理json)

文章目录 Rust常用库之序列化和反序列化库serde&#xff08;使用 Serde 处理json&#xff09;什么是serde库设计使用 Serde 处理jsonr# 的使用 参考 Rust常用库之序列化和反序列化库serde&#xff08;使用 Serde 处理json&#xff09; 什么是serde库 官网&#xff1a;https:/…

易源堂梵仕哲品牌新品发布会

祥龙启新&#xff0c;非凡无际&#xff01;2024年3月16日&#xff0c;上海易源堂集团梵仕哲品牌新品发布会在有着“山水宁海,寿者之乡”称号的浙江宁海顺利召开&#xff1b;易源堂集团联合创始人集团副总经理李振雨、易源堂集团营销策划总监曹斌&#xff0c;易源堂副总经理姚军…

缓存Caffine

缓存Caffine Caffine介绍添加手动加载自动加载异步加载 驱逐基于容量基于时间基于引用 移除显式移除移除监听器 刷新计算Interner规范 Caffine介绍 ​ Caffeine是一个基于Java8开发的提供了近乎最佳命中率的高性能的缓存库。 缓存和ConcurrentMap有点相似&#xff0c;但还是有…

mysql 用户管理-账户管理

学习了《mysql 用户管理-权限表》。接着学习更常用的的账户管理。 2&#xff0c;账户管理 MySQL提供许多语句用来管理用户账号,这些语句可以用来管理包括登录和退出MySQL服务器、创建用户、删除用户、密码管理和权限管理等内容。MySQL 数据库的安全性&#xff0c;需要通过账户管…

注册马来西亚商标常见问题

马来西亚商标法于1983年9月1日正式生效。这部商标法废除了马来亚、沙巴和沙捞越三地区各自的商标法规和申请程序&#xff0c;使马来西亚有了一部统一商标法。此外&#xff0c;马来西亚有关商标的法规包括1983年9月1日同时生效的《1983年商标法实施细则》。在马来西亚&#xff0…

Xcode-双架构arm64 x86_64编译

要启用通用构建&#xff0c;在最新版本的 Xcode 中&#xff0c;请打开您的项目设置&#xff0c;然后依次选择&#xff1a; 1. “Build Settings” 选项卡。 2. 在顶部输入框中输入 “Architectures”。 3. 在 “Architectures” 下拉列表中选择 “Other”。 4. 在输入框中输入 …

国内git最新版本下载链接2.44

git官网地址:Git - Downloading Package (git-scm.com) 蓝奏云: ​​​​​​gGit-2.44.0-64-bit.exe - 蓝奏云 git仓库地址:git/git: Git Source Code Mirror - This is a publish-only repository but pull requests can be turned into patches to the mailing list via …

有哪些方式适合保存token

保存token的最佳方式取决于具体的应用场景和需求。以下是几种常见的保存token的方式及其优缺点&#xff0c;以便您根据实际情况进行选择&#xff1a; HTTP Only Cookies&#xff1a; 优点&#xff1a;Cookies可以自动随HTTP请求发送&#xff0c;且HTTP Only属性可以防止JavaS…

2024常用接口抓包以及接口测试工具总结【建议收藏】

接口 统称为API&#xff0c;程序与程序之间的对接、交接。 接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点&#xff0c;主要是为了检验不同组件&#xff08;模块&#xff09;之间数据的传递是否正确&#xff0c;同时接口测试还要测试当前系统与第三方…

贪心算法的魅力与应用

在算法的世界里&#xff0c;贪心算法&#xff08;Greedy Algorithm&#xff09;以其简洁而高效的策略吸引着我们的目光。本文将深入探讨贪心算法的原理、特点以及它在实际问题中的广泛应用。 一、什么是贪心算法&#xff1f; 贪心算法是一种在每一步选择中都采取当前看起来最优…

zoom 在 css中的用法

zoom怎么用&#xff1f;&#xff08; 缩放和清除浮动&#xff09; 1、用css中的zoom属性可以让网页实现IE7中的放大缩小功能。 比如你想让你的网页缩小为原来的一半&#xff0c;那么就在body中加入style"zoom:0.5"&#xff0c; eg: zoom:120%, zoom:1 &#xff0…

谈谈我对 AIGC 趋势下软件工程重塑的理解

作者&#xff1a;陈鑫 今天给大家带来的话题是 AIGC 趋势下的软件工程重塑。今天这个话题主要分为以下四大部分。 第一部分是 AI 是否已经成为软件研发的必选项&#xff1b;第二部分是 AI 对于软件研发的挑战及智能化机会&#xff0c;第三部分是企业落地软件研发智能化的策略…

MySQL的事务深入理解和存储系统

目录 一、事务的基本理论 1.事务的隔离 1.1事务之间的相互影响 1.2事物隔离级别 2.查询和设置事物隔离级别 2.1查询全局事务隔离级别 2.2查询会话事物隔离级别 2.3设置全局事务隔离级别 2.4设置会话事务隔离级别 ​编辑3.事务控制语句 ​编辑3.1提交事务 ​编辑3.2…

服务器相关问题以及见解

1、服务器组成主要包含哪些主要部件&#xff1f; 中央处理器&#xff08;CPU&#xff09;&#xff1a;服务器的大脑&#xff0c;负责执行计算任务和处理数据。内存&#xff08;RAM&#xff09;&#xff1a;临时存储设备&#xff0c;用于存放正在使用或即将使用的数据&#xff…

Python问题异常处理与日志结合

我们掌握了try-except来处理程序运行中可能遇到的异常&#xff0c;以及使用logging来记录程序运行日志&#xff0c;该篇文章就结合二者来讲讲如何记录程序运行过程中的各种事件、状态信息以及遇到的异常情况&#xff0c;以便于追踪、诊断和解决程序运行时的问题。 目录 一、配…

H3C技术大全复现之高级路由交换技术 1

华子目录 VLAN 基本技术VLANIEEE 802.1Q交换机端口类型MVRP协议实验测试 VLAN扩展技术Super VLAN产生背景Super vlan&#xff08;相当于vlanif接口&#xff0c;也属于虚拟接口&#xff0c;可以充当网关&#xff09;Sub vlan&#xff08;普通vlan&#xff09;关于代理ARP普通代理…