编程语言外面，除了应用 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 都显示进去呢？
作者：春去春又来