基础插槽

2023年04月23日

柏拉文

越努力，越幸运

一、基础插槽

---

父组件

<template>
  <div>
    <AComp>
      <div>
        A 组件 Body
      </div>
    </AComp>
  </div>
</template>

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

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

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot></slot>
    <p>A 组件 Footer</p>
  </div>
</template>

二、默认内容插槽

---

父组件

<template>
  <div>
    <AComp></AComp>
  </div>
</template>

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

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

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot>A 组件 Body 默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>