Vue插槽之slot

1. 普通插槽
父组件

<template>
  <!--这里调用子组件,并在开始结束标签中填入dom元素-->
  <!--v-slot的属性是为了接收子组件中slot插槽的属性值用的
  属性中的值aaa必须在下面使用
  也可以书写为<classtest v-slot="{text,.....}">-->
  <classtest v-slot="aaa">
    <h1>我是通过插槽来的</h1>
    <br>
    <!--此处调用的子组件虽然是在classtest组件的插槽中使用的
    但是是通过此组件传入,所以需在此组件用import读取组件文件-->
    <classtest2 />
    <br>
    <!--此处的message因为是在父组件定义的DOM元素
    所以其作用于为父组件,子组件无法更改message-->
    <div>{{message}}</div>
    <br>
    <!--此处的aaa.text是子组件的text
    在子组件名称标签中使用v-slot属性实现子组件给父组件传值-->
    <div>{{aaa.text}}</div>
    <br>
  </classtest>
</template>
<script setup>
import classtest from "./components/classtest.vue";
import classtest2 from "./components/classtest2.vue";

import {ref} from 'vue'

let message=ref('我是父组件定义的message')
</script>
<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

子组件classtest.vue

<template>
  <div>下面出现的内容是通过插槽实现的</div>
  <br>
  <!--此处slot标签中间的内容为一个默认内容,
  在调用此组件的父组件没有传入DOM元素时显示
  给与一个text属性,使此插槽可以传值给父组件-->
  <slot text="我是子组件插槽的text属性">我是一个默认内容</slot>
</template>

<script>
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

子组件classtest2.vue

<template>
  <div>我是app.vue传过来的组件</div>
</template>

<script setup>
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9

2. 具名插槽
父组件

<template>
  <classtest>
    <!--为了使用具名插槽,写template标签,设置属性v-slot,值为具名插槽名称header-->
    <template v-slot:header>
      <h1>我是通过具名插槽来的</h1>
    </template>
    <!--调用具名插槽的另一种方法,不使用v-slot属性,替换为#-->
    <template #body>
      <h1>我是通过具名插槽来的</h1>
    </template>
    <!--此处使用[]在实现动态调用具名插槽,使用动态插槽名称-->
    <template v-slot:[aaa]>
      <h1>我是通过具名插槽来的</h1>
    </template>
  </classtest>
</template>
<script setup>
import classtest from "./components/classtest.vue";
import { ref } from "vue";
let aaa = ref("mess");
</script>
<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

子组件

<template>
  <div>下面出现的内容是通过插槽实现的</div>
  <br>
  <!--我是一个具名插槽用与接收父组件指定的插槽内容-->
  <slot name="header">我是具名插槽的默认内容</slot>
  <br>
  <slot name="body">我是具名插槽的默认内容</slot>
  <br>
  <slot name="mess">我是具名插槽的默认内容</slot>
</template>

<script>
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16