vue中插槽的用法,vue三种插槽的区别

　　本文主要详细介绍vue的插槽。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

一、认识插槽Slot

　　以前我们会通过props把一些数据传递给组件，让组件显示出来。但是，为了让这个组件更加通用，我们不能将组件中的内容限制为固定的div、span等。例如，在某些情况下，我们使用组件，希望组件显示一个按钮，而在其他情况下，我们使用组件显示一张图片。我们应该让用户决定在某个区域存储什么内容和元素。因此，有了插槽的存在，我们可以提高组件的可重用性和灵活性。

二、插槽的基本使用

　　直接用slot/slot。

三、插槽的默认内容

　　如果要设置槽位的默认内容，可以直接在槽位/槽位标签中添加内容。

四、多个插槽实现的效果

　　如上图所示，如果在组件之间设置了多个标签，那么组件的每个槽都会添加多个标签。

　　如上面的代码所示，槽名是用组件中每个槽/slot中的name属性设置的，模板标签用在组件中间，v-slot:属性名是一一对应设置的。

五、动态插槽

　　有时候我们的槽名不固定，需要从外界导入，所以需要使用动态槽。

　　如上图所示，我们在slot/slot中动态绑定属性名，通过props传入。我们通过v-slot在外部动态绑定属性：[na]。

六、具名插槽的缩写

　　如上图所示，命名插槽的v-slot:left可以缩写为#left。

七、渲染作用域

　　父模板的所有内容都在父模板中编译。

　　子模板的所有内容都在子集模板中编译。

　　如图，父组件中有title，子组件中有title，但最终显示的是父组件的title属性。

八、作用域插槽的案例

　　这里，数组数据设置在父组件中的数据中，并通过props传递给组件。子组件获取数组后，通过for循环遍历数组中的每一项，并通过v-bind将数据绑定到槽标签。然后在父组件中，可以传递v-slot:default=data ，这个数据变量就是数据。

九、独占默认插槽缩写

　　以上是范围槽的完整写法。

　　下面可以将其改写为：

　　也可以改写为：

十、默认插槽和具名的混合

　　作用域插槽案例可以改写为：

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。