具名插槽 slot使用

1.普通的子组件插槽
//Children.vue
<div>
	<slot></slot>
</div>

使用

<Children>
	<span>123</span>
</Children>

2.具名插槽
//Children.vue

<div>
	<span>123</span>
	<slot name="content"></slot>
</div>

使用

<Children>
	<span slot="content">456</span> //会替换子组件slot内容和位置
</Children>

3.作用域插槽

//子组件
<template>
  <div>
    <span>
      <slot :userData="user" name="header">
        {{ user.msg }}
      </slot>
      <slot :hobbyData="hobby" name="footer">
        {{ hobby.fruit }}
      </slot>
    </span>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        user:{
          firstName: 'gerace',
          lastName: 'haLi',
        },
        hobby:{
          fruit: "apple",
          color: "blue"
        }
      }
    }
  }
</script>
<style>
</style>

//父组件
<template>
  <myslot>
      <template v-slot:header="slotProps">
        {{ slotProps.userData.firstName }}
      </template>
      <template v-slot:footer="slotProps">
        {{ slotProps.hobbyData.fruit }}
      </template>
  </myslot>
</template>

<script>
  import myslot from './myslot';
  export default {
    components: {
      myslot
    }
</script>
<style>
</style>

针对多个插槽的情况，在写法上可以解构插槽prop，具名插槽可以使用缩写，v-slot可以使用#来代替，所以以上代码可以写成：

父组件

<template>
  <myslot>
      <template #header="{userData}">
        {{ userData.firstName }}
      </template>
      <template #footer="{hobbyData}">
        {{ hobbyData.fruit }}
      </template>
  </myslot>
</template>

<script>
  import myslot from './myslot';
  export default {
    components: {
      myslot
    }
  }
</script>
<style>
</style>

但是需要注意的是该缩写只在其有参数(名字)的时候才可用。这意味着以下语法是无效的：

<!-- 这样会触发警告 -->
<template>
  <myslot>
      <template #="{userData}">
        {{ userData.firstName }}
      </template>
      <template #="{hobbyData}">
        {{ hobbyData.fruit }}
      </template>
  </myslot>
</template>

总结:
1.子组件
不传参数

<slot name="one"></slot>

传递参数
user 为子组件内定义默认数据

<slot :one="user"></slot>

写法未改变

2.父组件
2.1 vue2.6.0+废弃slot=‘name’ 但仍可以使用
2.2 使用简单缩写的定义 #header 使用：要用一个 template标签包裹

<template #one> </template >

2.3 v-slot
匿名的作用域插槽和具名的作用域插槽 区别在于:
v-slot:defult=“接受的名称”(defult(匿名的可以不写，具名的相反要写的是对应的name))

v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"

//注意上面图中子组件数据绑定方式

参考文章