具名插槽

2023年04月23日

柏拉文

越努力，越幸运

一、认识

---

二、语法

---

2.1 完整语法

父组件

<template>
  <div>
    <AComp>
      <template v-slot:body1>
        body1 哈哈哈哈哈
      </template>
      <template v-slot:body2>
        body2 嘻嘻嘻嘻嘻嘻
      </template>
    </AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
};
</script>

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot name="body1">A 组件 Body1 默认内容</slot>
    <slot name="body2">A 组件 Body2 默认内容</slot>
    <slot name="body3">A 组件 Body3 默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

2.2 简写语法

父组件

<template>
  <div>
    <AComp>
      <template #body1> 哈哈哈 </template>
      <template #body2> 嘻嘻嘻 </template>
    </AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
};
</script>

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot name="body1"></slot>
    <slot name="body2"></slot>
    <slot name="body3">A 组件 Body3 默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

<script>
export default {
  name: "AComp",
};
</script>