vue组件插槽slot12

组件插槽slot

为什么在组件内使用slot

同一个组件可能会在不同的地方多次使用,最好的封装方式是抽取共性,保留不同。把大部分地方都需要的相同的部分直接写在组件内,少部分不相同的地方则在预留的插槽中实现,可以更好的让使用者根据自己的需求决定slot中要插入什么内容。

slot插槽作用:使封装的组件更具扩展性。

slot的基本使用方法

普通组件

在这里插入图片描述
在这里插入图片描述
具体效果:
在这里插入图片描述

含slot插槽的组件

在这里插入图片描述
在这里插入图片描述
具体效果:
在这里插入图片描述

slot插槽中含默认内容的组件

在这里插入图片描述
在这里插入图片描述
具体效果:
在这里插入图片描述

含具名插槽的组件

在这里插入图片描述
在这里插入图片描述
具体效果:
在这里插入图片描述

含作用域插槽的组件

前提理解

编译作用域:父组件模板内的所有东西都是在父级作用域内编译的,子组件模板内的所有东西都是在子级作用域内编译的。

例子:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
效果:
在这里插入图片描述
改变父组件、子组件中isShow的值

在这里插入图片描述
在这里插入图片描述
效果:
在这里插入图片描述
由上述例子可以得出,<navbar5 v-show="isShow"></navbar5>所用属性属于父组件。

在父组件中使用子组件时,整个子组件的使用过程是相当于在父组件内出现的,则子组件的作用域就是父组件,使用的属性也是父组件的属性。

作用域插槽
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
补充:join() 方法用于把数组中的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

具体效果:

默认显示形式
在这里插入图片描述
在父组件内调用子组件,并通过作用域插槽改变显示形式
在这里插入图片描述

加强理解作用域插槽中数据传输过程:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44836362/article/details/115124188