Vue中插槽的使用

目录

一、默认插槽

（1）概念

（2）代码展示

（3）后备内容

二、具名插槽

（1）概念

（2）代码展示

三、作用域插槽

        （1）概念

         （2）使用步骤

（3）用例展示

---

一、默认插槽

（1）概念

插槽究竟是什么呢？简单来说插槽就是用于决定将所携带的内容，插入到指定的某个位置。举个例子，比如说下面的图：

加入头部和底部都是写死的，但是我们希望主题部分不写死，那么这时候我们就需要用插槽了，也就是说插槽的作用就是让组件内部的一些结构支持自定义。

（2）代码展示

//fa.vue  子组件

//父组件  App.vue

（3）后备内容

封装组件时，可以为预留的插槽提供后备内容（默认内容）。

效果：

外部使用组件时，不传东西，则slot会显示后备内容

外部如果使用组件，传东西，则slot整体会被换掉，显示传的东西。

 

      
        
不传东西就显示我
     

二、具名插槽

（1）概念

与前面的默认插槽的作用也是一样的，不过具名具名，就是具有名字的插槽，起名字自然就是为了辨别是哪一个，也就是说一个组件内有多处结构，需要外部传入标签进行定制。

如下图的场景：

这次我想让头部主体和底部三部分都可以动态展示。

（2）代码展示

//App.vue   父组件

//fa.vue   子组件

三、作用域插槽

（1）概念

其实如果将插槽分类的话，插槽只分成两种，分别是默认插槽和具名插槽，作用域插槽并不在其中。

作用域插槽就是在定义slot插槽的同时，它是可以传值的，给插槽绑定数据，将来使用组件时可以用（父传子）。

（2）使用步骤

（1）给slot标签，以添加属性的方式传值

（2）所有添加的属性都会被收集到一个对象中

{
id:3,
msg:'测试'
}

（3）在template中，通过'#插槽名=obj'接收，默认插槽名为default

（3）用例展示

需求：创建一个表格，对表格每一行数据都可以进行删除，根据他的id值

//App.vue

//fa.vue