关于#vue.js#的问题：app 具名插槽

Question

在app this.$slots在mounted输出为空字符串，用$slots.label判断插槽显示触发不了

Answer 1

【相关推荐】

• 这篇博客: vue slot 插槽使用详解中的 $slots 属性 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  $slots 用来访问被插槽分发的内容，在组件开发中承载了非常重要的作用，详情请看官网

  vue $slots。

  2.6之后与之前版本的 $slots 属性略有不同，下面做一个简单对比

  子组件模板如下：

  <template>
    <div class="hello">
      <slot></slot>
      <slot name="title"></slot>
    </div>
  </template>
  
  <script>
  export default {
      mounted () {
        console.log(this.$slots, 'slot===2.x')
      },
  }
  </script>

   2.6版本以下组件使用：

  <HelloWorld>
      <div>这是将被默认插槽接收的内容</div>
      <div slot="title">这是传递给title插槽的内容</div>
  </HelloWorld>

  输出如下：

  

  2.6 及以上版本使用：

  <HelloWorld >
      <template v-slot>这是将被默认插槽接收的内容</template>
      <template v-slot:title>
        <div>这是传递给title solt的内容</div>
      </template>
  </HelloWorld>

   输出如下：

  

   很明显两个版本 $slots 属性值得类型是不同的，更深层次这里不做讨论，推荐查看：

  Vue3.0破坏性变化----$slots

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^