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

what

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

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

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

以终为始

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

用 js 的方式来对比一下:

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

通过 case 来确定匹配的条件

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

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

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

how

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

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

拆分 Switch 功能

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

举个栗子:

case = "xiaohong" 时

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

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

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

实现原理

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

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

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

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

那比如我想显示 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功能组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue自定义switch开关组件,实现样式可自行更改

    用法: import switchc from './public/switch' <switchc v-model="value1" text="on|off"></switchc> 属性 text 非必填,类型为string,要求格式为"on|off" ,以 | 分隔 事件 change html部分: <template> <div> <span class="weui-swi

  • vue.js封装switch开关组件的操作

    我的项目本来用的element,但是switch开关不符合设计要求,于是自己封装了一个switch组件,并且实现了switch开关的双向数据绑定 <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="t

  • Vue父子组建的简单通信之控制开关Switch的实现

    Vue在目前是很好的框架,第一次使用Vue开发项目,刚开始的时候在一个控制开关的组件都花费了很久的时间,问题解决了,把自己的一些小问题给记录下来,方便以后看及帮助像我这样的初级萌新解决遇到的相同问题. 问题: 父组件传入值到子组件,子组件修改之后怎样传回到父组件  父组件:内部首先要有三步 1.父组件中引用子组件 2.父组件中注册子组件 3.在子组件上绑定传值 父组件 <template> <div class="hello"> <ul> <l

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

    what 编程语言里面,除了使用 if 语句来做条件判断,还有另外一个常用的就是 switch 了. 而在 vue 中,官方已经帮助我们实现了 v-if 这个指令,但是还没有 switch ,那我们能不能自己实现一个呢? 这篇文章就是来探索这个问题,并且最终实现一个 Switch 组件 以终为始 先来看看我们希望用户是如何使用 Switch 的 用 js 的方式来对比一下: 用户可以通过一个 VSwitch 组件来应用 switch 功能 通过 case 来确定匹配的条件 然后每一个 case

  • vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能

    目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此记录分享. 1 准备工作 基于一个新建的Vue3项目上实现. 1.1 安装ant-design-vue 官方文档:Components Overview - Ant De

  • vue3自己封装面包屑功能组件的几种方式

    目录 前言 一.为什么需要面包屑? 二.初级封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足 三.进阶封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足 四.高阶封装 1. 思路 2. 代码演示 3. 使用 五.使用jsx优化 总结 前言 面包屑导航可以将浏览过的页面记录下来,方便很快速的跳转回某一个页面,本文介绍了几种自己封装面包屑组件的方式,我们一起来看看如何实现的吧~ 一.为什么需要面包屑? 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"

  • Vue3中进行页面局部刷新组件刷新的操作方法

    目录 前言 开始操作 vue2和vue3的区别 vue2 vue3 Vue2和Vue3的钩子函数生命周期对照 步入正题,解决今天的问题 代码 前言 今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态 但是数据已经传送给后端,后端也完成了响应的处理 这个时候我想到了局部刷新,我想vue3是vue2的升级版,那么部分语法应该是支持的才对,经过尝试不是很完美 没有达到自己想要的情况,期间还很多报错 开始操作 vue3的生命周期和vue2的生命周期是完全不

  • vue3中ref绑定dom或者组件失败的原因及分析

    目录 vue3 ref绑定dom或者组件失败原因分析 场景描述 ref绑定失败情况举例 解决方案 vue3组合式API的v-for及ref绑定DOM 总结 vue3 ref绑定dom或者组件失败原因分析 场景描述 在vue3中经常用到使用ref绑定组件或者dom元素的情况,很多时候,明明使用ref绑定了相关组件,但是经常ref绑定失败的情况. ref绑定失败情况举例 ref绑定失败的绝大多数情况是,在ref和组件绑定的时候,该组件还未渲染,所以绑定失败. 或者组件刚开始未渲染,ref未绑定,当组

  • 利用vue3自己实现计数功能组件封装实例

    目录 前言 一.封装的意义 二.如何封装? 1. 思路 2. 准备 2. 使用 三. 效果演示 总结 前言 本文将带你用vue3自己封装一个实现计数功能的全局组件,其应用场景相信各位一看便知,那就是购物网站中常见的数量选择模块,一起来看看如何实现哇 一.封装的意义 项目中需要用到的地方较多 模块化开发,降低了代码冗余,是开发更加高效 一次封装,到处使用 二.如何封装? 1. 思路 使用vue3中v-model来完成父子组件之间的相互传值,本文章使用vueuse/core中封装好的useVMode

  • VUE3中h()函数和createVNode()函数的使用解读

    目录 h()函数和createVNode()函数的使用 使用方法 VUE3中h方法和createVnode的实现 在公共包shared里写上ShapeFlags 在runtime-core模块里创建vnode.ts文件专门处理虚拟节点 为了后续的diff算法,我们要给这个虚拟节点上加一些属性和标识 h的用法 创建h.ts文件来写h方法 h()函数和createVNode()函数的使用 使用方法 h(标签, {属性},内容) h(标签, {属性},[可以继续嵌套h()]) createVNode(

  • vue2 vue3中使用Echarts详细

    目录 1.安装 2.vue2中使用Echarts 在main.js文件中 给定一个容器 3.vue3中使用Echarts 在根组件里引入echart,一般是App.vue 在需要使用的页面,定义div 然后在需要使用到Echarts的页面inject 1.安装 npm install echarts --save 2.vue2中使用Echarts 在main.js文件中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echar

  • vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) : <template><div class="form"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

  • 如何在在Vue3中使用markdown 编辑器组件

    目录 安装 引入组件 基础用法 保存后的 markdown 或者 html 文本如何渲染在页面上? 安装 # 使用 npm npm i @kangc/v-md-editor@next -S # 使用yarn yarn add @kangc/v-md-editor@next 引入组件 import { creatApp } from 'vue'; import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/s

随机推荐