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

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

Vue.component('fade', {
      props: ['show'],
      template: `
 
   
 
      `,
      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。

Vue的作者在社区内回答过这个问题，所以代码以这个答案为准即可。