- 子组件向父组件传递数据,之后在父组件定义的模板中渲染
项目文件
传值过程
代码
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>