vue具名插槽的基本使用实例

前言

具有名字的插槽slot使用 中的 "name" 属性绑定元素

注意：

1，如果没有匹配到 则放到匿名的插槽中

2，具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序

vue的匿名插槽（默认插槽）

父组件

<div>
<myslot>我是刚刚</myslot>
</div>

子组件

<div>
<slot><slot>
</div>

vue的具名插槽

父组件

<div>
<myslot>
 <template #one>猪猪是一只大肥猫</template>
 <template #two>通通是一个大 * 子</template>
 <template #three> * 是没心没肺的小混蛋</template>
 我是刚刚
</myslot>
</div>

子组件

<div>
<slot name="one"></slot>
<slot><slot>
<slot name="two"></slot>
<slot name="three"></slot>
</div>

渲染出来（大致顺序）即为

vue的作用域插槽

大白话解释作用域插槽：父组件可以通过插槽读到子组件对应插槽所带的数据
父组件

<div>
<myslot>
<template #oneData="oneData">
<div>{{oneData.one.message}}</div>
</template>
<template #two>通通是一个大 * 子</template>
<template #three> * 是没心没肺的小混蛋</template>
我是刚刚
</myslot>
</div>

子组件

<div>
<slot name="one" :data='one'></slot>
<slot><slot>
<slot name="two"></slot>
<slot name="three"></slot>
</div>

<script>
export default {
 data() {
  return {
   one: {
    message: '这是子组件所带的数据message',
      },
  };
 },
}
</script>

代码优化

<div>
<myslot>
 <template #oneData="{oneData}">
  <div>{{oneData.message}}</div>
 </template>
 <template #two>通通是一个大 * 子</template>
 <template #three> * 是没心没肺的小混蛋</template>
 我是刚刚
</myslot>
</div>

子组件

<div>
<slot name="one" :oneData='one'></slot>
<slot><slot>
<slot name="two"></slot>
<slot name="three"></slot>
</div>

<script>
export default {
 data() {
  return {
   one: {
    message: '这是子组件所带的数据message',
      },
  };
 },
}
</script>

总结

来源：https://blog.csdn.net/yh8899abc/article/details/117125537