vue3中轻松实现switch功能组件的全过程


Posted in Vue.js onJanuary 07, 2021

what

编程语言里面,除了使用 if 语句来做条件判断,还有另外一个常用的就是 switch 了。

而在 vue 中,官方已经帮助我们实现了 v-if 这个指令,但是还没有 switch ,那我们能不能自己实现一个呢?

这篇文章就是来探索这个问题,并且最终实现一个 Switch 组件

以终为始

先来看看我们希望用户是如何使用 Switch 的

vue3中轻松实现switch功能组件的全过程

用 js 的方式来对比一下:

vue3中轻松实现switch功能组件的全过程

用户可以通过一个 VSwitch 组件来应用 switch 功能

通过 case 来确定匹配的条件

然后每一个 case 匹配的条件用 template 来表示

这样我们已经规定好用户该如何使用了,剩下的其实就是实现了

这一步背后的思想就是确定组件的规格,也可以说是确定组件的使用接口

how

那么我们应该如何实现呢?

我们先来思考一下 switch 的功能

拆分 Switch 功能

某个等于 case 值的那个模板显示,别的都不应该显示

举个栗子:

case = "xiaohong" 时

那么就只能显示名字为 "xiaohong" 的插槽

vue3中轻松实现switch功能组件的全过程

如果没有匹配到任何一个 case ,并且还有 defalut 插槽时,显示 defalut 插槽

vue3中轻松实现switch功能组件的全过程

当然,switch 还有更复杂的功能,我们这里先从最核心的功能入手,慢慢在复杂化(迭代思想)

实现原理

首先我们必须先知道该组件的 slots,都有哪些

在 vue3 中,我们只需要通过以下方式就可以轻松获取 slots

setup(props,{slots}){
 console.log(slots)
}

如果打印 slots 的话,你会发现可以得到一个对象,而 key 的值就是 slot 的名称,而 value 是一个函数,调用这个函数就可以获取到对应的 vnode。

vue3中轻松实现switch功能组件的全过程

那比如我想显示 xiaohei 这个插槽要怎么做呢?

只需要这样

setup(props, { slots }) {
  
  return () => {
   return slots.xiaohei()
  };
 },

setup 除了可以返回一个对象,作为导出给 template 用的数据,还可以直接返回一个函数作为 render。

而 render 函数只要返回对应的 vnode ,那么最终就会被渲染到 view 上。

所以按照上面代码的写法的话最终会显示 xiaohei slot 内部的内容

那当明白上述知识点后,我们在回来看看第一个功能

是不是只要我们把和 case 匹配的 slots 渲染出来即可

看代码:

export default {
 props: ["case"],
 setup(props, { slots }) {
  console.log(slots);
  return () => {
   if (slots[props.case]) {
    return slots[props.case]();
   }
  };
 },
};

注意哦,一定要加条件判断,因为很有可能是没有对应的 slot 的

看,懂了原理之后是不是很轻松的实现第一个功能了。

我们在来看第二个功能的时候是不是也很简单了

只需要在加一段代码即可:

export default {
 props: ["case"],
 setup(props, { slots }) {
  console.log(slots);
  return () => {
   if (slots[props.case]) {
    return slots[props.case]();
   }

   if (slots["default"]) {
    return slots["default"]();
   }
  };
 },
};

如果在第一个条件那没有匹配到的话,肯定会到达第二个条件判断,也就是 if (slots["default"])

接着就是如果有 default slot 的话,那么就返回即可

至此,你已经实现了一个简单的 Switch 功能组件了

总结

让我们来总结总结你已经学到了哪些知识点

  • 设计组件时,先设计该组件的规则(接口)
  • tasking 的思想,把大功能拆小,然后逐一击破
  • 在 vue3 中获取 slots 的方式
  • setup 不止可以返回对象,还可以返回一个函数,效果同 render 函数一样
  • render 函数返回的 vnode 最终会被渲染到 view 上

如果你学到的话,那么请用你的小手点个赞呗~~~

完整代码

// VSwitch.vue
<script>
export default {
 props: ["case"],
 setup(props, { slots }) {
  return () => {
   if (slots[props.case]) {
    return slots[props.case]();
   }

   if (slots["default"]) {
    return slots["default"]();
   }
  };
 },
};
</script>

扩展思考

那其实这里实现的 switch 功能并不完整,如果说用户匹配满足多个条件呢?并且没有 break,那么我们是不是应该把匹配到的 template 都显示出来呢?

自己尝试一下实现看看?

到此这篇关于vue3中轻松实现switch功能组件的文章就介绍到这了,更多相关vue3实现switch功能组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 #Vue.js
详解Vue2的diff算法
Jan 06 #Vue.js
vuex的使用步骤
Jan 06 #Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 #Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 #Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 #Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
You might like
PHP MSSQL 存储过程的方法
2008/12/24 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
django orm模块中的 is_delete用法
2020/05/20 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
中学教师教育感言
2014/02/21 职场文书
租房协议书
2014/04/10 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2014年班干部工作总结
2014/11/25 职场文书
学生逃课检讨书
2015/02/17 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
孝女彩金观后感
2015/06/10 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
Python合并pdf文件的工具
2021/07/01 Python