在前端开发中，有一种很常见的需求，就是一个容器默认隐藏，当鼠标滑动到其父容器时，再显示，离开时再隐藏。
对于vue来说，这本是一个很简单的功能，因为没什么技术难度，简单实现如下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div @mouseenter="enter" @mouseleave="leave"> <div v-show="show">呵呵呵呵，我对你若隐若现</div> </div> </template> <script> export default{ data(){ return { show:false } }, methods:{ enter(){ this.show = true; }, leave(){ this.show = false; } } } </script> |
可一旦我们的页面有了多个需要这样做的地方，那代码就变成了这样
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<template> <div> <div @mouseenter="enter" @mouseleave="leave"> <div v-show="show">呵呵呵呵，我对你若隐若现</div> </div> <div @mouseenter="enter1" @mouseleave="leave1"> <div v-show="show2">呵呵呵呵，我对你若隐若现</div> </div> <div @mouseenter="enter2" @mouseleave="leave2"> <div v-show="show3">呵呵呵呵，我对你若隐若现</div> </div> </div> </template> <script> export default{ data(){ return { show:false, show2:false, show3:false } }, methods:{ enter(){ this.show = true; }, leave(){ this.show = false; }, enter1(){ this.show1 = true; }, leave1(){ this.show1 = false; }, enter2(){ this.show2 = true; }, leave2(){ this.show2 = false; } } } </script> |
一个简单的功能，都谈不上封装（逻辑代码就一句），我们却要重复的编写相同的代码，不仅代码臃肿，还浪费时间，更要为此定义多个不同的变量。作为一个有强迫症（合格）的开发者，这肯定是不愿接受的。
那么，我们有什么好的办法解决没有呢，答案肯定是有的。一种方法就是封装组件，另一种就是定义指令，都能实现效果。
而我今天要讲的，就是封装一个组件。需要说明的是，我这里讲的并不是最优的方式，而是我个人对 slot 的一种认识，对 slotProps 的一种应用探究。因为我感觉这两个东西用的人相对较少，我想说明一下它们确实是有用处的。
组件的写法就不多说了，想必大家都会，直接贴代码。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<template> <div @mouseenter="enter" @mouseleave="leave"> <!--特别要注意，这里是 :show="show"，而不是v-show="show"--> <slot :show="show"></slot> </div> </template> <script> var MouseFade = { name:'MouseFade', data(){ return { show:false } }, methods:{ enter(){ this.show = true; }, leave(){ this.show = false; } } } /* 组件注册 */ MouseFade.install = function(Vue) { Vue.component(MouseFade.name, MouseFade); }; export default MouseFade; </script> |
这是个很平常的组件，slot就是内容分发的插槽，但我们特别要注意这里的slot上的绑定，这里是 :show=”show”，而不是v-show=”show”，前者用于数据传递，后者只是个简单的指令。当我们通过:show=”show”把组件内部的变量暴露之后，我们就可以在组件的slot里使用它。
|
1 2 3 4 5 6 7 8 9 |
<div class="list-item"> <mouse-fade class="item-inner"> <template v-slot:default="slotProps"> <div v-show="slotProps.show"> slot内容 </div> </template > </mouse-fade> </div> |
就像上面这样，我们的一个鼠标滑过显示隐藏的功能就做好了。
我们来分析一下上面的代码，<mouse-fade class=”item-inner”>是组件调用，没什么说的。关键是第二层<template v-slot:default=”slotProps”>，template是vue的模板，渲染时不会生成dom节点。重点是v-slot:default=”slotProps”，这句话的作用就是，取出mouse-fade组件内部暴露出的所有默认变量（default指的就是slot没有命名的变量），也就是我们组件里定义的show。然后我们就能通过slotProps.show来展示他的值了，当然，就跟data里的属性一样，也可以用于属性绑定。所以 ，通过v-show=”slotProps.show”就能达到显示隐藏的效果。其实上面组件加业务代码等同于如下代码：
|
1 2 3 4 5 |
<div class="list-item" @mouseenter="enter" @mouseleave="leave"> <div v-show="show"> slot内容 </div> </div> |
只是通过一个组件过后，当我们一个页面有多个这样的业务场景时，就不用再为每个容器定义一个单独的变量和两个方法了。
当然，我这里展示的，只是slot 和 slotProps 的冰山一角，它两个用在一起，还能玩出更多花样，好好看看官网，然后自己动手试试吧。相信你会有很大的收获。
附讲一个slotProps 的使用场景：假如我们要做一个列表轮播组件，或者就是列表组件。每一个列表的外形都一样，但是每个列表的列表项却有自己的渲染模板，这个时候，我们的循环就得写在组件里，但具体的列表项渲染，又得让用户自己定制，这种场景就体现出了slotProps 的作用，大家见得最多的，可能就是elementUI或iview的表格组件。
发表评论