- slot
- 父组件向子组件传递数据
匿名插槽--直接写
具名插槽--指定名称
父组件中
子组件中:
代码
App.vue
html
<template>
<h2>App.vue</h2>
<!-- 匿名插槽 -->
<Header>
<a href="1234567890.com">1234567890</a>
</Header>
<!-- 具名插槽 -->
<Footer>
<template v-slot:url>
<a href="abcdefg.com">abcdefg</a>
</template>
</Footer>
</template>
<script setup>
import { ref, reactive, provide } from "vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
</script>
<style lang="scss" scoped></style>
Header.vue
html
<template>
<h2>Header.vue</h2>
<slot/>
</template>
<script setup>
import { inject } from 'vue'
</script>
<style lang="scss" scoped></style>
Foot.vue
html
<template>
<h2>Footer.vue</h2>
<slot name="url"/>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>