关于vue的插槽

        插槽的功能是什么？

插槽的指令为v-slot，它目前取代了slot和slot-scope。

允许子组件在父组件中使用时，通过标签嵌套（HTML结构）内容，在子组件内部通过插槽接收传入的内容。

一、基础插槽

1、子组件中定义slot接收父组件传入内容

const Child = {
      template: `
        <div>
          <slot></slot>
          <h3>子组件头部</h3>  
         
          <h3>子组件尾部</h3>
        </div>
      `
    }

2、父组件中 子组件使用 双标签 通过嵌套 传入的内容

  const Home = {
      template: `
        <div>
          <h2>父组件</h2>
          <child>
      // 嵌入的子组件的内容
            <div>
              <button>按钮</button>  
            </div>  
          </child>
          <hr/>
          <child>
            <div>
              <mark>按钮</mark>  
            </div>   
          </child>
        </div>
      `,
      components: {
        Child
      }
    }

 二、具名插槽：定义多个插槽，并定义名字，来接收父组件中传入的多个  代码块

 1、子组件中 定义 定义多个slot并 起名字 name属性

 const Child = {
      template: `
        <div>
          <slot name="a"></slot>
          <h3>子组件body</h3>  
          <slot name="b"></slot>
        </div>
      `
    }

2、父组件中 子组件使用 双标签 通过嵌套 传入 多个 结构块 并 指定每个代码块 传入的slot

const Home = {
      template: `
        <div>
          <h2>父组件</h2>
          <child>
            <div slot="b">
              <mark>按钮</mark>  
            </div> 
            <div slot="a">
              <button>按钮</button>  
            </div>  
            
          </child>
    
        </div>
      `,
    }

 三、作用域插槽

        使用场景：slot 传入的 结构块 定义在 父组件中，但是渲染是在子组件中渲染，传入结构块只能使用父组件data中的数据，实际场景经常需要使用子组件中的数据

 1、子组件中 通过 slot 的自定义属性挂载 数据

 const Child = {
      template: `
        <div>
          <slot :msg="msg" :arr="arr" c="1111"></slot>
          <h3>子组件头部</h3>  
          <h3>子组件尾部</h3>
        </div>
      `,
      data(){
        return {
          msg: '子组件数据',
          arr: ['a', 'b', 'c', 'd']
        }
      }
    }

2、父组件中 给传入 结构块根元素  定义 slot-scope属性来接收 slot 自定义属性挂载的数据

 const Home = {
      template: `
        <div>
          <h2>父组件</h2>
          <child>
              <div slot-scope="data">
                 <span>{{data.msg}}</span>
              </div>
           </child>
        </div>
      `,
      data(){
        return {
          msg: '子组件数据',
        }
      }
    }