VUE slot 插槽失效、不起作用、显示失败问题解决

NDSC_L

已于 2022-10-24 21:52:02 修改

阅读量2.1w

点赞数 11

分类专栏：前端踩坑经验文章标签： vue.js 前端 javascript

于 2021-11-07 22:58:44 首次发布

本文链接：https://blog.csdn.net/NDSC_L/article/details/121198920

版权

前端同时被 3 个专栏收录

5 篇文章 1 订阅

订阅专栏

经验

4 篇文章 0 订阅

订阅专栏

踩坑

2 篇文章 0 订阅

订阅专栏

本文总结了Vue中slot插槽失效的三种常见问题及解决方案：1) 拼写错误，如`solt`应为`slot`；2) 需使用`v-slot`指令并正确包裹template；3) slot名称应全为小写。通过这些方法，可以有效解决Vue组件中slot不工作的问题。

摘要由CSDN通过智能技术生成

VUE slot 插槽失效、不起作用、显示失败问题解决

被 slot 插槽问题折磨了一晚上，以下为总结

主要分三种：

1、slot 写成了 solt
2、使用的每一个slot都需要一个 template 包裹，且 slot=“名称” 修改为 v-slot:名称，具体解决方法如下

https://blog.csdn.net/weixin_46704556/article/details/118638344

3、slot 里面的name属性不能有大写字母，全改成小写即可

  <div id='app'>
    <login-component>
      <template v-slot:loginPage>
        登录页面
      <template>
    <login-component>
  </div>
  <template id="first">
    <div>
      <!--此处用了大写字母 P 导致插槽无法使用-->
      <slot name="loginPage"></slot>
    </div>
  </template>
  
  <script>
  Vue.component('login-component', {template: '#first'})
    var vm = new Vue({el: '#app'})
  </script>