vue中switch使用,vue switch开关
本文主要介绍vue3中开关功能组件的简单实现的相关信息。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面就让我们和边肖一起学习吧。
what
在编程语言中，除了使用if语句进行条件判断外，另一个常用的就是switch。
在vue，官方已经帮助我们实现了v-if指令，但是还没有切换。那么我们自己能实现一个吗？
本文就是要探讨这个问题，并最终实现一个Switch组件。
以终为始
让我们来看看我们希望用户如何使用Switch。
和js比较一下：
用户可以通过VSwitch组件应用开关功能。
根据案例确定匹配条件。
然后用模板表示每个事例匹配条件。
这样我们就规定了用户应该如何使用，剩下的其实就是实现了。
这个步骤背后的想法是确定组件的规范，或者组件的接口。
how
那么应该如何实现呢？
我们先想想switch的功能。
拆分 Switch 功能
将显示一个等于case值的模板，不应显示任何其他内容。
举个栗子：
当case=小红
那么只能显示名为‘小红’的槽。
如果没有与任何大小写匹配的，并且有一个默认插槽，将显示默认插槽。
当然，switch还有更复杂的功能。这里先从核心函数开始，逐渐复杂(迭代思维)。
实现原理
首先要知道这个组件的插槽，分别是什么？
在vue3中，我们可以通过以下方式轻松获得插槽
设置(道具，{插槽}){
console.log(插槽)
}
如果打印插槽，你会发现你可以得到一个对象，key的值是插槽的名称，而value是一个函数。调用这个函数来获取相应的vnode。
比如我要给小黑看这个槽，我该怎么做？
这就够了。
设置(道具，{插槽}) {
return ()={
return slots .小黑()
};
},
Setup不仅可以将对象作为导出到模板的数据返回，还可以直接将函数作为render返回。
只要render函数返回对应的vnode，最终都会渲染到视图中。
所以根据上面的代码，最终会显示小黑槽里面的内容。
了解以上知识点后，我们再回来看看第一个函数。
是不是只要我们渲染出符合案例的槽位就可以了？
看看代码：
导出默认值{
道具：[case]，
设置(道具，{插槽}) {
console.log(插槽)；
return ()={
if (slots[props.case]) {
返回slots[props . case]()；
}
};
},
};
哦，一定要加上条件判断，因为很可能没有对应的槽。
看，明白原理后，第一个功能是不是很容易实现？
我们看第二个函数，是不是也很简单？
只需添加一段代码：
导出默认值{
道具：[case]，
设置(道具，{插槽}) {
console.log(插槽)；
return ()={
if (slots[props.case]) {
返回slots[props . case]()；
}
if (slots[default]) {
返回插槽[ default ]()；
}
};
},
};
如果第一个条件没有匹配，那么肯定会达到第二个条件判断，也就是if (slots[default])。
然后，如果有默认槽，就直接回去。
到目前为止，您已经实现了一个简单的开关功能组件。
总结
让我们总结一下你学到了什么。
当设计一个组件时，首先要设计它的规则(接口)。
Tasking的思路是分解大的功能，然后一个一个的分解。
在vue3中获取插槽的方法
Setup不仅可以返回一个对象，还可以返回一个函数，和render函数的效果一样。
render函数返回的vnode最终会呈现在视图上。
如果学会了，请用小手给个赞~ ~ ~
完整代码
//VSwitch.vue
脚本
导出默认值{
道具：[case]，
设置(道具，{插槽}) {
return ()={
if (slots[props.case]) {
返回slots[props . case]()；
}
if (slots[default]) {
返回插槽[ default ]()；
}
};
},
};
/脚本
扩展思考
实际上，这里实现的开关功能并不完整。用户匹配满足多个条件怎么办？而且没有断行，那么要不要显示所有匹配的模板？
自己试着体会一下？
关于vue3中开关功能组件的简单实现的文章到此结束。关于vue3中开关功能组件实现的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。