在 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 插槽

固然，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 都显示出来呢？

做者：春去春又来