<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>最近有小伙伴询问Vue中插槽的使用，或者有些对插槽比较陌生的有比较想用的，这里我就针对Vue的插槽使用方式进行简单的讲解，其实对于插槽最全的还要属官方文档，但是有些小伙伴就是不爱看官方文档，那么就来看下我这边对插槽基础使用的叙述吧，希望对你有用！！！<br /> <strong>首先我们先了解插槽的分类，插槽分为默认插槽（这个叫法可能有不一样的，但是都是一个东西，我这比较习惯成为默认插槽）、具名插槽和作用域插槽。下边将对这几个插槽的基础用法进行简单实例，讲解谈不上就是基础的使用用法让你更加便捷的使用。</strong></p> 讯享网
默认插槽顾名思义就是默认中的，默认的插槽为直接写在子组件标签内部的，在子组件中用slot标签接收，这里的插槽使用方式为vue在2.6.0及之后版本的使用方式，包括后边具名和作用域的都是如此！！！
还是老规矩，话不多说上代码，用代码来讲解感觉是最使用的，从代码中理解也是最有效的，如果看不明白代码敲起来试一试会好很多：
插槽的代码都分为父组件代码和子组件代码，这样演示插槽更为直白。
Father.vue 默认插槽父组件
讯享网
Son.vue 默认插槽子组件
代码中的文章请注意查看，一些描述信息都在代码中展示了，方便学习
根据名字可以得知，这是拥有名字的插槽，有了名字就方便使用了，那一部分用到那一部分不会冲突。
Father.vue 具名插槽父组件
讯享网
Son.vue 具名插槽子组件
其实默认插槽也是具名插槽的一种，只是名字为default在使用中省略了而已，在后边作用域的代码中我们会看到对他们的描述。
作用域插槽的作用域为当前的所处的vue实例环境，正常在父组件中标签内部都是父组件的环境，可以直接使用父组件data等的信息，但是插槽作为到子组件中展示的内容，有时候我没又需要一些子组件中的data数据之类的，利用父子组件传值也可以但是相对麻烦，插槽则提供了一种更好的方式，老版本（即为2.6.0之前的）中使用slot-scope来实现，新版本中的使用为更加的方便。
Father.vue 作用域插槽父组件
讯享网
Father.vue 作用域插槽子组件
插槽的使用多是在封装组件时候的使用，使封装的组件使用起来扩展性更加方便和更加的好用。
以上就是对Vue插槽使用的描述和实例，作者确实有点懒没有将代码每一步分解一下，不过里边的文字描述相信你可以理解的。
如有疑问可以留言，也可以到一起探讨：
1: ， 2: ，也可以到微信找我 shenzhipeng1023
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/199936.html