[TOC]
>[success] # CheckboxGroup
~~~
1.无论是使用iview 还是element ui，都可以发现在'checkbox'这里他们都会提供一个组件叫
'CheckboxGroup',会将'checkbox' 数据统一管理，我们来以'iview' 为例：
<template>
<i-checkbox-group v-model="multiple">
<i-checkbox label="option1">选项 1</i-checkbox>
<i-checkbox label="option2">选项 2</i-checkbox>
<i-checkbox label="option3">选项 3</i-checkbox>
<i-checkbox label="option4">选项 4</i-checkbox>
</i-checkbox-group>
</template>
<script>
export default {
data () {
return {
multiple: ['option1', 'option3']
}
}
}
</script>
所以这章节就是封装一个'CheckboxGroup' 组件
~~~
>[info] ## 上个章节分装的checkbox组件和实际原生的区别
~~~
1.在封装之前，给先知道原生的'checkbox' 和我们上个章节封装的不同点
~~~
>[danger] ##### 原生
~~~
1.这里直接用了vue官方文档的案例
2.可以发现原生"checkbox" 本身绑定的就是数组，是不是有点懵了，上个章节我们封装的'checkbox'组件绑定
的只能是'String,Number,Boolean'这三种类型，其实上个章节案例将'value' 这个绑定值改为数组，在做一些
略微逻辑跳转也可以实现类似原生的方法
~~~
~~~
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
~~~
~~~
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
~~~
>[info] ## 为了可以和原生一样绑定数组写 -- CheckboxGroup 组件
~~~
1.写组件从三个方面入手'props','events','slots',根据iview组件我们也可以简单分析出来，
首先使用的时候用的是'v-model',那就一定有两个一个是'value'，一个是'input'事件，
再就是有一个'solt' 用来放置封装好的'checkbox'组件
~~~
>[danger] ##### 改进我们的checkbox 组件让更像原生用法
~~~
1.现在我们要将我们上一个章节的'checkbox'可以也绑定数组，对照iview我们大体设计如下：
~~~
* iview
~~~
<i-checkbox label="option1">选项 1</i-checkbox>
~~~
* 我们大体猜想
~~~
1.iview 中'<i-checkbox label="option1">选项 1</i-checkbox>' label 作为封装组件的'props'中的属性传递给
'label',在就保证这一组的input中'v-model'绑定都是相同的数组
~~~
~~~
<input
type="checkbox"
:disabled="disabled"
:value="label"
v-model="model"
@change="change"
/>
~~~
>[danger] ##### 改造checkbox组件
~~~
1.我们将checkbox组件通过if分割成了两组，一组是我们之前的用绑定是'String,Number,Boolean'这三种类型，
一组是我们为了让他像原生一样绑定的是数组
2.我们现在可以确定一点的思路就是如果是最外层使用的是'CheckboxGroup' 组件，那将使用的就是我们的数组
形式的input，这里在'mounted'声明周期使用'findComponentUpward'在组件通讯章节讲的写法，去找当前组件的
父级是否是使用'CheckboxGroup' 组件包裹来决定使用哪种模式的'checkbox'
~~~
~~~
<template>
<label>
<span>
<input
v-if="group"
type="checkbox"
:disabled="disabled"
:value="label"
v-model="model"
@change="change"
/>
<input v-else type="checkbox" :disabled="disabled" :checked="currentValue" @change="change" />
</span>
<slot></slot>
</label>
</template>
<script>
import { findComponentUpward } from "@/lib/util.js";
export default {
name: "iCheckbox",
props: {
label: {
type: [String, Number, Boolean]
},
disabled: {
type: Boolean,
default: false
},
value: {
type: [String, Number, Boolean],
default: false
},
trueValue: {
type: [String, Number, Boolean],
default: true
},
falseValue: {
type: [String, Number, Boolean],
default: false
}
},
data() {
return {
model: [],
group: false,
parent: null,
currentValue: this.value
};
},
methods: {
change(event) {
if (this.disabled) {
return false;
}
const checked = event.target.checked;
this.currentValue = checked;
const value = checked ? this.trueValue : this.falseValue;
this.$emit("input", value);
console.log(this.model);
if (this.group) {
this.parent.change(this.model);
} else {
this.$emit("on-change", value);
}
},
updateModel() {
this.currentValue = this.value === this.trueValue;
}
},
mounted() {
this.parent = findComponentUpward(this, "iCheckboxGroup");
if (this.parent) {
this.group = true;
}
if (this.group) {
// 关于updateModel 写法往下看，这里不用加因为下面父组件的生命周期
// 也做了同样的事感觉不用加
this.parent.updateModel(true);
} else {
this.updateModel();
}
console.log(this.model);
}
};
</script>
~~~
>[danger] ##### 现在来分析我们的 CheckboxGroup 组件写法
~~~
1.上面有个'updateModel'方法具体思路，我们先思考一下首先，'CheckboxGroup' 组件插槽中的每一个
'checkedbox' 组件的'v-model'绑定的数组一定要是一个数组，这个数组就是'CheckboxGroup' 传入进来的数组
2.因此现在的思路就是使用我们组件通信章节说的'findComponentsDownward'向下找到所有在当前组件
'CheckboxGroup' 里面的每一个'checkedbox'组件，并且给他们的'v-model'绑定的数组值都赋值成'CheckboxGroup'
的数组。
3.在'updateModel'方法中有个地方需要说明一下：
if (this.childrens) {
// 这里的this 指代的是当前'CheckboxGroup' 组件，首先因为是一个实例所以肯定是一个对象
// 这里又使用了es6 解构获取 value 值，这个value值是谁呢？
// 首先我们看使用 <checkbox-group v-model="multiple">，因此其实当前这个组件有个隐藏的props
// 这个props 就是value 这个value 绑定的又是获取每一项的数组
// 因此将每一项'checkedbox'要管理的数组我们找到了，现在又有每一个子项的对象
// 将每一个子项对象中的'model ' 都绑定上这个统一的数组
const { value } = this;
console.log(this);
this.childrens.forEach(child => {
child.model = value;
if (update) {
child.currentValue = value.indexOf(child.label) >= 0;
child.group = true;
}
});
}
~~~
~~~
<template>
<div>
<slot></slot>
</div>
</template>
<script>
import { findComponentsDownward } from "@/lib/util.js";
export default {
name: "iCheckboxGroup",
props: {
value: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
currentValue: this.value,
childrens: []
};
},
methods: {
updateModel(update) {
this.childrens = findComponentsDownward(this, "iCheckbox");
if (this.childrens) {
const { value } = this;
console.log(this);
this.childrens.forEach(child => {
child.model = value;
if (update) {
child.currentValue = value.indexOf(child.label) >= 0;
child.group = true;
}
});
}
},
change(data) {
this.currentValue = data;
this.$emit("input", data);
this.$emit("on-change", data);
}
},
mounted() {
this.updateModel(true);
},
watch: {
value() {
this.updateModel(true);
}
}
};
</script>
~~~
>[danger] ##### 使用的效果
~~~
<template>
<div>
{{multiple}}
<checkbox-group v-model="multiple">
<checkbox label="option1">选项 1</checkbox>
<checkbox label="option2">选项 2</checkbox>
</checkbox-group>
</div>
</template>
<script>
import Checkbox from "@/components/checkbox/Checkbox.vue";
import CheckboxGroup from "@/components/checkbox/CheckboxGroup.vue";
export default {
data() {
return {
multiple: ["option1"],
};
},
components: {
Checkbox,
CheckboxGroup
}
};
</script>
<style>
</style>
~~~
- Vue--基础篇章
- Vue -- 介绍
- Vue -- MVVM
- Vue -- 创建Vue实例
- Vue -- 模板语法
- Vue -- 指令用法
- v-cloak -- 遮盖
- v-bind -- 标签属性动态绑定
- v-on -- 绑定事件
- v-model -- 双向数据绑定
- v-for -- 只是循环没那么简单
- 小知识点 -- 计划内属性
- key -- 属性为什么要加
- 案例说明
- v-if/v-show -- 显示隐藏
- v-for 和 v-if 同时使用
- v-pre -- 不渲染大大胡语法
- v-once -- 只渲染一次
- Vue -- class和style绑定
- Vue -- filter 过滤器
- Vue--watch/computed/fun
- watch -- 巧妙利用watch思想
- Vue -- 自定义指令
- Vue -- $方法
- Vue--生命周期
- Vue -- 专属ajax
- Vue -- transition过渡动画
- 前面章节的案例
- 案例 -- 跑马灯效果
- 案例 -- 选项卡内容切换
- 案例-- 筛选商品
- 案例 -- 搜索/删除/更改
- 案例 -- 用computed做多选
- 案例 -- checked 多选
- Vue--组件篇章
- component -- 介绍
- component -- 使用全局组件
- component -- 使用局部组件
- component -- 组件深入
- component -- 组件传值父传子
- component -- 组件传值子传父
- component -- 子传父语法糖拆解
- component -- 父组件操作子组件
- component -- is 动态切换组件
- component -- 用v-if/v-show控制子组件
- component -- 组件切换的动画效果
- component -- slot 插槽
- component -- 插槽2.6
- component -- 组件的生命周期
- component -- 基础组件全局注册
- VueRouter--获取路由参数
- VueRouter -- 介绍路由
- VueRouter -- 安装
- VueRouter -- 使用
- VueRouter--router-link简单参数
- VueRouter--router-link样式问题
- VueRouter--router-view动画效果
- VueRouter -- 匹配优先级
- vueRouter -- 动态路由
- VueRouter -- 命名路由
- VueRouter -- 命名视图
- VueRouter--$router 获取函数
- VueRouter--$route获取参数
- VueRouter--路由嵌套
- VueRouter -- 导航守卫
- VueRouter -- 写在最后
- Vue--模块化方式结构
- webpack--自定义配置
- webpack -- 自定义Vue操作
- VueCli -- 3.0可视化配置
- VueCli -- 3.0 项目目录
- Vue -- 组件升级篇
- Vue -- 组件种类与组件组成
- Vue -- 组件prop、event、slot 技巧
- Vue -- 组件通信（一）
- Vue -- 组件通信（二）
- Vue -- 组件通信（三）
- Vue -- 组件通信（四）
- Vue -- 组件通信(五)
- Vue -- 组件通信(六)
- Vue -- bus非父子组件通信
- Vue -- 封装js插件成vue组件
- vue组件分装 -- 进阶篇
- Vue -- 组件封装splitpane(分割面板)
- UI -- 正式封装
- Vue -- iview 可编辑表格案例
- Ui -- iview 可以同时编辑多行
- Vue -- 了解递归组件
- UI -- 正式使用递归菜单
- Vue -- iview Tree组件
- Vue -- 利用通信仿写一个form验证
- Vue -- 使用自己的Form
- Vue -- Checkbox 组件
- Vue -- CheckboxGroup.vue
- Vue -- Alert 组件
- Vue -- 手动挂载组件
- Vue -- Alert开始封装
- Vue -- 动态表单组件
- Vue -- Vuex组件的状态管理
- Vuex -- 参数使用理解
- Vuex -- state扩展
- Vuex -- getters扩展
- Vuex--mutations扩展
- Vuex -- Action 异步
- Vuex -- plugins插件
- Vuex -- v-model写法
- Vuex -- 更多
- VueCli -- 技巧总结篇
- CLI -- 路由基础
- CLI -- 路由升级篇
- CLI --异步axios
- axios -- 封装axios
- CLI -- 登录写法
- CLI -- 权限
- CLI -- 简单权限
- CLI -- 动态路由加载
- CLI -- 数据性能优化
- ES6 -- 类的概念
- ES6类 -- 基础
- ES6 -- 继承
- ES6 -- 工作实战用类数据管理
- JS -- 适配器模式
- ES7 -- 装饰器（Decorator）
- 装饰器 -- 装饰器修饰类
- 装饰器--修饰类方法（知识扩展）
- 装饰器 -- 装饰器修饰类中的方法
- 装饰器 -- 执行顺序
- Reflect -- es6 自带版本
- Reflect -- reflect-metadata 版本
- 实战 -- 验证篇章（基础）
- 验证篇章 -- 搭建和目录
- 验证篇章 -- 创建基本模板
- 验证篇章 -- 使用
- 实战 -- 更新模型(为了迎合ui升级)
- 实战 -- 模型与接口对接
- TypeSprict -- 基础篇章
- TS-- 搭建（一）webpack版本
- TS -- 搭建（二）直接使用
- TS -- 基础类型
- TS -- 枚举类型
- TS -- Symbol
- TS -- interface 接口
- TS -- 函数
- TS -- 泛型
- TS -- 类
- TS -- 类型推论和兼容
- TS -- 高级类型(一)
- TS -- 高级类型(二)
- TS -- 关于模块解析
- TS -- 声明合并
- TS -- 混入
- Vue -- TS项目模拟
- TS -- vue和以前代码对比
- TS -- vue简单案例上手
- Vue -- 简单弄懂VueRouter过程
- VueRouter -- 实现简单Router
- Vue-- 原理2.x源码简单理解
- 了解 -- 简单的响应式工作原理
- 准备工作 -- 了解发布订阅和观察者模式
- 了解 -- 响应式工作原理（一）
- 了解 -- 响应式工作原理（二）
- 手写 -- 简单的vue数据响应(一)
- 手写 -- 简单的vue数据响应(二)
- 模板引擎可以做的
- 了解 -- 虚拟DOM
- 虚拟dom -- 使用Snabbdom
- 阅读 -- Snabbdom
- 分析snabbdom源码 -- h函数
- 分析snabbdom -- init 方法
- init 方法 -- patch方法分析（一）
- init 方法 -- patch方法分析（二）
- init方法 -- patch方法分析（三）
- 手写 -- 简单的虚拟dom渲染
- 函数表达解析 - h 和 create-element
- dom操作 -- patch.js
- Vue -- 完成一个minVue
- minVue -- 打包入口
- Vue -- new实例做了什么
- Vue -- $mount 模板编译阶段
- 模板编译 -- 分析入口
- 模板编译 -- 分析模板转译
- Vue -- mountComponent 挂载阶段
- 挂载阶段 -- vm._render()
- 挂载阶段 -- vnode
- 备份章节
- Vue -- Nuxt.js
- Vue3 -- 学习
- Vue3.x --基本功能快速预览
- Vue3.x -- createApp
- Vue3.x -- 生命周期
- Vue3.x -- 组件
- vue3.x -- 异步组件？？？
- vue3.x -- Teleport？？？
- vue3.x -- 动画章节 ？？
- vue3.x -- 自定义指令 ？？？
- 深入响应性原理 ？？？
- vue3.x -- Option API VS Composition API
- Vue3.x -- 使用set up
- Vue3.x -- 响应性API
- 其他 Api 使用
- 计算属性和监听属性
- 生命周期
- 小的案例（一）
- 小的案例（二）-- 泛型
- Vue2.x => Vue3.x 导读
- v-for 中的 Ref 数组 -- 非兼容
- 异步组件
- attribute 强制行为 -- 非兼容
- $attrs 包括 class & style -- 非兼容
- $children -- 移除
- 自定义指令 -- 非兼容
- 自定义元素交互 -- 非兼容
- Data选项 -- 非兼容
- emits Option -- 新增
- 事件 API -- 非兼容
- 过滤器 -- 移除
- 片段 -- 新增
- 函数式组件 -- 非兼容
- 全局 API -- 非兼容
- 全局 API Treeshaking -- 非兼容
- 内联模板 Attribute -- 非兼容
- key attribute -- 非兼容
- 按键修饰符 -- 非兼容
- 移除 $listeners 和 v-on.native -- 非兼容
- 在 prop 的默认函数中访问 this -- ??
- 组件使用 v-model -- 非兼容
- 渲染函数 API -- ??
- Slot 统一 ??
- 过渡的 class 名更改 ???
- Transition Group 根元素 -- ??
- v-if 与 v-for 的优先级对比 -- 非兼容
- v-bind 合并行为 非兼容
- 监听数组 -- 非兼容