柳州网站开发,wordpress克隆,母版页和窗体做网站例子,南宁做网站比较好的公司有哪些今日简单分享 radio 组件的实现原理#xff0c;主要从以下三个方面来分享#xff1a;
1、radio 页面结构
2、radio 组件属性
3、radio 组件方法 一、radio 页面结构
1.1 页面结构如下#xff1a; 二、radio 属性
2.1 value / v-model 属性#xff0c;类型为 string / …今日简单分享 radio 组件的实现原理主要从以下三个方面来分享
1、radio 页面结构
2、radio 组件属性
3、radio 组件方法 一、radio 页面结构
1.1 页面结构如下 二、radio 属性
2.1 value / v-model 属性类型为 string / number / boolean无默认值
组件内部的 value 接收来自父组件的 v-model 传过来的值代码部分如下 组件内部部分的逻辑
1、页面模板部分v-modelmodel
2、属性部分value通过这个属性来接收父组件 v-model 传过来的值
3、computed 部分model通过 get 方法获取父组件 v-model 的值然后通过 set 方法设置将 input 值传递出去。如 this.$emit(input,val);
简单说明在创建自定义组件时 this.$emit(input,val) 是一个常用模式主要是触发 input 事件并将 val 传递出去。这与 vue 的双向绑定和表单输入元素的工作方式有关在 vue 中v-model 是一个语法糖用来实现数据的双向绑定当使用 v-model 将一个表单输入绑定到 vue 实例上时 vue 是自动为这个元素添加 value 的 getter 和 setter。而当元素 value 的值变化时会触发 input 事件更新绑定的数据属性。 2.2 label 属性类型为 string / number / boolean无默认值 2.3 disabled 属性类型 boolean默认 false
2.3.1 页面使用如下 2.3.2 对应的 disabled 样式可以在样式文件表中找到如下: 2.3.2 isDisabled 计算属性如下 2.4 border 属性类型是 boolean默认值 false
这个属性相对简单在交互上主要是为 radio 添加边框在实现上主要是通过向组件内部传递属性通过属性判断是否为 radio 增加边框样式。具体如下 2.5 size 属性类型 stringmedium / small / mini无默认值
这个属性的实现逻辑和 disabled 属性大致相同二者都是通过使用计算属性的方式来控制 dom 的最终展示效果针对于下面的讲解主要先针对于 el-radio 组件进行详细说明至于涉及到的 el-radio-group 的部分将会有一个专门的分享。具体如下 通过上图发现实现的核心部分是 radioSize 这个计算属性如下 2.6 name 属性类型 string无默认值
给原生 input 标签添加了 name 属性一般开发当中没特意关注过这个属性个人理解加上 name 属性可能会提高代码的可读性吧源码如下 三、radio 事件
3.1 input 事件绑定值发生变化时触发的事件回调参数为选中的 radio label 值具体如下
通过 input 事件可以进行获取值之后的操作源码如下
