什么是插槽？
我们知道，在vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。
插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西。插槽又分为匿名插槽、具名插槽以及作用域插槽。
场景使用:如果你三个页面都相同就个别一个模块不同，如果每个页面都复制可以，但是用插槽slot 更好。
动手写一遍更好理解，我是在操作实践中快速的理解。
1、匿名插槽
在todo组件中引入子组件，并在子组件标签中写入内容
效果展示：
2、具名插槽
插槽有一个name属性。与匿名插槽相对，加了name属性的匿名插槽就是具名插槽
通过在template上写v-slot:name来使用具名插槽
效果展示：
3、作用域插槽(我觉得应该是我们用到最多的，数据传递)
匿名插槽的作用域插槽。让子组件中的数据 在父级的插槽内容中可用
父组件：
效果展示：
具名插槽的作用域插槽:
父组件渲染：
方法二：解构插槽写法
子组件：
父组件：
页面渲染展示
网友评论