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

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

项目文件

传值过程

代码

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>

参考

https://www.bilibili.com/video/BV1nV411Q7RX