为什么Vue中的slot不能应用v-show指令

[ly2011]

今天偶然发现，在Vue中使用插槽slot，是无法通过v-show控制slot的显示的，来看代码

Vue.component('fade', {
      props: ['show'],
      template: `
        <transition @before-enter="handleBeforeEnter" @enter="handleEnter">
          <slot v-show="show"></slot>
        </transition>
      `,
      methods: {
        handleBeforeEnter: function(el) {
          el.style.color = 'red'
        },
        handleEnter: function(el, done) {
          setTimeout(() => {
            el.style.color = 'green'
            done()
          }, 2000)
        }
      }
    })

这是随便写的一个封装动画组件，如果在slot标签上使用v-show，程序功能是无法实现的，必须要改成v-if。

原因是这样的，slot实际上是一个抽象元素，有点类似template，本质上并不是一个元素。而v-show是通过控制元素的display来进行显示隐藏的，slot本质上并不是元素，所以压根也就不会有display 这个css属性。

所以，slot的显示隐藏，还真得使用v-if。