插槽的使用

什么是插槽?

我们知道,在vue中,引入的子组件标签中间是不允许写内容的。为了解决这个问题,官方引入了插槽(slot)的概念。

插槽,其实就相当于占位符。它在组件中给你的HTML模板占了一个位置,让你来传入一些东西。插槽又分为匿名插槽、具名插槽以及作用域插槽。

场景使用:如果你三个页面都相同就个别一个模块不同,如果每个页面都复制可以,但是用插槽slot 更好。

动手写一遍更好理解,我是在操作实践中快速的理解。

1、匿名插槽

在todo组件中引入子组件,并在子组件标签中写入内容


效果展示:

2、具名插槽

插槽有一个name属性。与匿名插槽相对,加了name属性的匿名插槽就是具名插槽

通过在template上写v-slot:name来使用具名插槽

效果展示:

3、作用域插槽(我觉得应该是我们用到最多的,数据传递)

匿名插槽的作用域插槽。让子组件中的数据 在父级的插槽内容中可用

父组件:

效果展示:

具名插槽的作用域插槽:

父组件渲染:

方法二:解构插槽写法

子组件:

父组件:


页面渲染展示

转子:VUE中插槽slot用法 及其使用场景_Oralinge-CSDN博客_vue插槽的使用

你可能感兴趣的:(插槽的使用)