【vue】作用域插槽（子组件向父组件传数据）

最新推荐文章于 2024-06-03 00:00:00 发布

tao355667

最新推荐文章于 2024-06-03 00:00:00 发布

阅读量498

点赞数 8

分类专栏： # Javascript基础+Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_63070489/article/details/137718054

版权

Javascript基础+Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

本文详细描述了在Vue应用中，如何使用子组件通过具名插槽向父组件传递数据，以及在父组件模板中使用解构写法渲染这些数据的示例。

摘要由CSDN通过智能技术生成

子组件向父组件传递数据，之后在父组件定义的模板中渲染

项目文件

在这里插入图片描述

传值过程

在这里插入图片描述

代码

App.vue

<template>
  <h2>App.vue</h2>
  <hr>
  <!-- 具名插槽 -->
  <Footer>
    <!-- <template #url="data">
      {{ data.title }}
      {{ data.user }}
    </template> -->
    <!-- 解构写法 -->
    <template #url="{ title, user }">
      {{ title }}
      {{ user }}
    </template>

  </Footer>

</template>

<script setup>
import Footer from "./components/Footer.vue";

</script>

<style lang="scss" scoped></style>

Footer.vue

<template>
    <h2>Footer.vue</h2>
    <slot name="url" title="abcdefg" user="100"/>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>