系列文章目录
第一章 element源码(一)简要介绍
第二章 element源码(二)Layout 布局组件
第三章 element源码(三)色彩、字体、边框与图标
第四章 element源码(四)button按钮组件
第五章 element源码(五)radio 单选框组件
第六章 element源码(六)checkbox 多选框组件
一、radio组件
<label class="el-checkbox">
<span class="el-checkbox__input">
<input class="el-checkbox__original"
type="checkbox"
v-model="model">
</span>
<span class="el-checkbox__label"
v-if="$slots.default || label">
<slot></slot>
<template v-if="!$slots.default">{{label}}</template>
</span>
</label>
label标签包裹 选择框input type="checkbox"
和 label
这里有个处理可以学习一下,和vue相关的,这个我在自己封装组件时也用上了实用性很高,$slots.default
用来判断父组件有没有插槽内容
<span class="el-checkbox__label"
v-if="$slots.default || label">
<slot></slot>
<template v-if="!$slots.default">{{label}}</template>
</span>
二、逻辑实现
value / v-model 绑定值 string / number / boolean
这个地方有个组件库利用vue指令v-model处理数据传输的方法
//子组件计算属性
computed: {
model: {
get () {
return this.isGroup
? this.store : this.value !== undefined
? this.value : this.selfModel;
},
set (val) {
if (this.isGroup) {
this.isLimitExceeded = false;
(this._checkboxGroup.min !== undefined &&
val.length < this._checkboxGroup.min &&
(this.isLimitExceeded = true));
(this._checkboxGroup.max !== undefined &&
val.length > this._checkboxGroup.max &&
(this.isLimitExceeded = true));
this.isLimitExceeded === false &&
this.dispatch('ElCheckboxGroup', 'input', [val]);
} else {
this.$emit('input', val);
this.selfModel = val;
}
}
},
}
这里代码不看isGroup,是组件库为处理分组的处理。get取父组件value,set触发父组件input事件传参
// 父组件
<template>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>
这里父组件没有通过触发的input事件取子组件传的值,那么是怎么取到值的呢
这里涉及v-model的原理,v-model是语法糖
//v-model
<input type="text" v-model="name">
//:value
<input type="text" :value="name" @input="_input">
_input(e){
this.name=e.target.value
}
}
所以实际上父组件已经通过v-model内封装的input事件取到了值,这个方法在自己封装的组件中也是常用的