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