本文介绍了Vue.js中的插槽概念，包括默认插槽如何让父组件内容替换子组件的<slot>标签，具名插槽如何通过名字将内容定位到子组件的不同位置，以及作用域插槽如何绑定数据实现更灵活的模板扩展。通过实例代码展示了三种插槽的使用方法和渲染效果。
一、什么是插槽?
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，填充的内容会替换子组件的<slot></slot>标签。
下面大家可以看一下代码了解 ====>默认插槽
子组件代码如下 :
父组件代码如下 :
最后看下渲染的效果 :
我们可以看到的是填充的内容会替换子组件的<slot></slot>标签里面的内容.
二 、什么是具名插槽?
具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
子组件代码如下 :
设置了两个插槽 : one 和 two
父组件代码如下 :
最后在看下渲染效果 :
最后看到的也是填充的内容把slot的内容覆盖了
三、 什么是作用域插槽?
作用域插槽就是 :绑定数据的插槽 .
图示:
组件内变量绑定在slot上, 然后使用组件v-slot:插槽名字="变量" ，变量上就会绑定slot传递的属性和值
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
