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

相关推荐
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈