插槽的使用!!

什么是插槽

插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间,为用户预留的内容的占位符
即:使用者来决定某一块区域到底存放什么内容和元素

一、认识插槽
插槽的使用!!_第1张图片

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

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

二、使用插槽

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

1、普通插槽
插槽组件




使用插槽



查看效果

插槽的使用!!_第2张图片

2、具名插槽 

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



使用插槽



查看效果

插槽的使用!!_第3张图片

3、作用域插槽
在vue中有渲染作用域的概念

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

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



使用插槽



查看效果

插槽的使用!!_第4张图片

 

你可能感兴趣的:(前端)