Vue 之 插槽的使用,一次性给你说清楚

目录

一、 认识插槽

二、使用插槽

1.普通插槽

插槽组件

使用插槽

查看效果

 2.具名插槽

插槽组件

使用插槽

 查看效果

 3.作用域插槽 

插槽组件

使用插槽

查看效果 


前言 : 在开发中,我们会经常封装一个个复用的组件,大部分都是传递不同的数据,让组件来进行展示,template结构都是固定的

那么,有没有一种可能,可以让使用者来决定某一块区域到底存放什么内容和元素呢

Vue 之 插槽的使用,一次性给你说清楚_第1张图片

答案是有的,那就是使用插槽,根据传入的不同,显示特定的内容 

一、 认识插槽

Vue 之 插槽的使用,一次性给你说清楚_第2张图片

这个时候我们就可以使用插槽

  • 插槽的使用过程其实是抽取共性、预留不同
  • 将共同的元素、内容依然在组件内进行封装
  • 将不同的元素使用slot作为占位,让外部决定到底显示什么元素

二、使用插槽

vue中将元素作为承载分发内容的出口,使用就可以为封装组件开启一个插槽

1.普通插槽

插槽组件




使用插槽




查看效果

Vue 之 插槽的使用,一次性给你说清楚_第3张图片


 2.具名插槽

给插槽绑定一个name属性,也就是取个名字,使用的时候可以找到对应的插槽把内容放入

插槽组件




使用插




 查看效果

Vue 之 插槽的使用,一次性给你说清楚_第4张图片


 3.作用域插槽 

在vue中有渲染作用域的概念

  • 父级模版里的所有内容都是在父级作用域中编译
  • 子模版里的所有内容都是在子作用域中编译

tip : 也就是说,在父组件中是访问不到子组件的内容的,虽然在父组件中使用了插槽,内容是插进了子组件中,但是还是不能访问子组件中定义的变量

插槽组件




使用插槽




查看效果 

Vue 之 插槽的使用,一次性给你说清楚_第5张图片


tip : 这边文章总的来说不难,不过细节还是挺多的

Vue 之 插槽的使用,一次性给你说清楚_第6张图片

你可能感兴趣的