v-slot匿名插槽、具名插槽及作用域插槽

1.定义组件
通过父传子的配置，确实能够完成一定的组件内容的定制，但是只能完成一些简单的定制，如果是复杂的内容，需要进行定制，就需要学习了解插槽。

初始参考代码片段，效果如下图1

图1

2.使用插槽的目的：可以帮助我们定制组件的内容
slot作用：可以进行内容的分发
简单说就是利用在组件内部占用一个或者多个位置，可供组件传入对应的模板代码进去

插槽

1.匿名插槽

只要是没有具体分配的内容，都会给到匿名插槽或者

（1）直接在modal组件中自定义标签内容如

温馨提示：

，当然此时可以为任意标签任意内容，并且组件可以复用，效果如下图2

  

    
      
警告：
    
    
      
温馨提示：
    
  

(2)同时在子组件中需替换为用于占位，即在modal组件中自定义的内容都会显示在slot占位的位置
【可以参考上方初始代码对比】

// 定义组件
    Vue.component('modal', {
      template: `
      

        

              
        
      
      `,
    })

注意： 等于

图2

2.具名插槽

指带有名字的插槽，如果组件内需要多个插槽,因此配置了名字的插槽，才可以实现定向分发指定插入.
元素有一个特殊的attribute：name。这个attribute可以用来定义额外的插槽：

使用步骤：
(1)给插槽起名字

    // 定义组件
    Vue.component('modal', {
      template: `
      

        

          
        
        

            
        
        

            
        
      
      `,
    })

(2)在分发内容时，通过template标签，将内容包裹，且里面可以添加任意标签内容，并指定分发的插槽名v-slot：插槽名。

现在