为了账号安全,请及时绑定邮箱和手机立即绑定

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

2018.04.07 15:04 3912浏览

今天偶然发现,在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。

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

点击查看更多内容
37人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消