switch调函数 vue_在 vue3 中轻松实现 switch 功能组件 「简单易懂」

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

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

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

以终为始

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

用 js 的方式来对比一下：

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

通过 case 来确定匹配的条件

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

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

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

how

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

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

拆分 Switch 功能

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

举个栗子：

case = "xiaohong" 时

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

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

<