VUE---插槽

一、插槽的作用&场景

        1、在封装组件的时候，将可变的结构设计为插槽（）

        2、使用上述组件的时候，可以按需为插槽提供自定义的结构，以达到复用组件且高度自定的效果

二、基本语法 

1、组件内需要自定义的结构部分，改为占位

2、使用组件时，标签内部，传入结构替换slot

注：默认内容，若MyDialog中不传内容，则会显示slot的默认内容

示例如下：

// MyDialog -- 子组件

// 父组件内容如下

    
    你确认要进行删除操作么？

结果如下：

  

三、具名插槽

 一个组件内有多处结构，需要传入外部标签进行定制时，需要使用具名插槽。

语法：

        1、给slot添加name属性，以区分结构

        2、父组件中用包裹语句块，配合v-slot:名字，来对应结构位置

注：

        v-slot 可以简写为 #；

        父组件中一定要用；

        默认的slot插槽的名字为default；

 示例如下：

 

结果如下：

 

四、作用域插槽 

        有时候，子组件在定义插槽的时候，需要向父组件传递一些数据，这样的插槽叫做作用域插槽。

使用步骤：

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

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

        （3）父组件的template中，利用#插槽名="obj" 接收

注：

        传递的属性不能叫name，name是插槽的名字；

        作用域插槽只能在当前的template中使用；

示例如下：

结果如下：