Vue插槽之slot

最新推荐文章于 2024-05-31 11:16:14 发布

云远12189

最新推荐文章于 2024-05-31 11:16:14 发布

阅读量545

点赞数 10

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_41575632/article/details/136330575

版权

VUE 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了Vue.js中如何使用普通插槽和具名插槽进行父子组件间的DOM元素传递，以及如何通过`v-slot`属性和动态插槽实现组件间的交互和数据共享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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>

子组件classtest.vue

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

<script>
</script>

<style>
</style>

子组件classtest2.vue

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

<script setup>
</script>

<style>
</style>

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>

子组件

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

<script>
</script>

<style>
</style>