vue3-(插槽的使用)

1.默认插槽的使用：

子组件：

<template>
  <div class="a">
    <div>我是A子组件</div>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
</script>
<style scoped>
.a {
  width: 100%;
  height: 80px;
  background: slateblue;
  text-align: center;
  font-size: 20px;
}
</style>

父组件：

<template>
  <div>
    <span>我是主体内容部分</span>
    <button>按钮</button>
    <A>
      <template #default> 我是默认插槽内容 </template>
    </A>
  </div>
</template>
<script setup>
import A from './A.vue';
</script>
<style scoped>
div {
  width: 100%;
  height: 100%;
  background: seagreen;
  text-align: center;
  font-size: 20px;
}
</style>

2.具名插槽：给插槽起名，一个子组件可以放多个插槽，根据名字将内容放置在对应的位置

子组件：

<template>
  <div class="a">
    <div>我是A子组件</div>
    <slot></slot>
    <slot name="name1"></slot>
    <slot name="foot"></slot>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
</script>
<style scoped>
.a {
  width: 100%;
  height: 80px;
  background: slateblue;
  text-align: center;
  font-size: 20px;
}
</style>

父组件：

<template>
  <div>
    <span>我是主体内容部分</span>
    <button>按钮</button>
    <A>
      <template #name1>我是name1的插槽内容 </template>
      <template #foot> 我是foot的插槽内容 </template>
      <template #default> 我是默认插槽内容 </template>
    </A>
  </div>
</template>
<script setup>
import A from './A.vue';
</script>
<style scoped>
div {
  width: 100%;
  height: 100%;
  background: seagreen;
  text-align: center;
  font-size: 20px;
}
</style>

3.作用域插槽：

子组件：

<template>
  <div class="a">
    <div>我是A子组件</div>
    <div v-for="item in list" :key="item">
      <slot :sad="item"></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
type names = {
  name: string;
  age: number;
};

const list = reactive<names[]>([
  {
    name: '张三',
    age: 18
  },
  {
    name: '张三',
    age: 19
  },
  {
    name: '张三',
    age: 10
  },
  {
    name: '张三',
    age: 13
  }
]);
</script>
<style scoped>
.a {
  width: 100%;
  height: 80px;
  background: slateblue;
  text-align: center;
  font-size: 20px;
}
</style>

父组件：

<template>
  <div>
    <span>我是主体内容部分</span>
    <button>按钮</button>
    <A>
      <template #default="{ sad }">
        <div v-for="(item, index) in sad" :key="index">{{ sad.name }}</div>
      </template>
    </A>
  </div>
</template>
<script setup>
import A from './A.vue';
</script>
<style scoped>
div {
  width: 100%;
  height: 100%;
  background: seagreen;
  text-align: center;
  font-size: 20px;
}
</style>

4.动态插槽

子组件：

<template>
  <div class="a">
    <div>我是A子组件</div>
    <slot name="name1"></slot>
    <slot name="foot"></slot>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
</script>
<style scoped>
.a {
  width: 100%;
  height: 80px;
  background: slateblue;
  text-align: center;
  font-size: 20px;
}
</style>

父组件：

<template>
  <div>
    <span>我是主体内容部分</span>
    <button>按钮</button>
    <A>
      <template #[foot]> foot的插槽内容</template>
      <template #[name]> name1的插槽内容</template>
    </A>
  </div>
</template>
<script setup>
import A from './A.vue';
import { ref } from 'vue';

const name = ref('name1');

const foot = ref('foot');
</script>
<style scoped>
div {
  width: 100%;
  height: 100%;
  background: seagreen;
  text-align: center;
  font-size: 20px;
}
</style>