vue-slot插槽

Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口，即可以将在组件内填写的内容渲染在子组件的slot之间。

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案。在接下来所有的 2.x 版本中slot 和 slot-scope 特性仍会被支持，但已经被官方废弃，且不会出现在 Vue 3 中。

匿名插槽

一个不带 name 的 出口会带有隐含的名字“default”，使用时可以简化为

v-slot="form"。

具名插槽

子组件中通过name属性给槽口设定名称

父组件中通过v-slot:名称的方式来使用具名槽口

父子组件通信案例

通过属性绑定和v-slot我们也可以在子组件中循环渲染父组件中的数据

首先我们在父组件中定义一组数据

data(){
      return{
        listData:[
          {
            name:"Tome",
            job:"web前端"
          },
          {
            name:"Lily",
            job:"java"
          }
        ]
      }
    }

将数据通过属性绑定的方式传递给子组件Home，并且设定一个v-slot插槽对象名称，这时候插槽内部就可以通过prop来访问数据

在Home组件中接收父组件传递过来的data

props:{
    data:{
      type:Array,
      required:true
    }
  }

将data传递到slot的自定义属性list中

将Child组件插到Home组件的slot槽口中，并且Child组件可以通过prop.list来循环渲染数据，并且将item通过属性绑定的方式传递给Child

在Child组件中接收Home传递过来的data

props:{
    data:{
      type:Object,
      required:true
    }
  }

并且在页面中通过key名来渲染数据

    
{{data.name}}
    
{{data.job}}