Parent
<template>
<ChildComponent>
<template v-slot:default="slotProps">
<!-- 这里的 slotProps 是子组件提供的数据 -->
<p>来自子组件的数据: {{ slotProps.childData }}</p>
</template>
</ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
}
</script>
Child
<template>
<div>
<!-- 定义插槽并传递数据给插槽 -->
<slot :childData="childData"></slot>
</div>
</template>
<script>
export default {
data() {
return {
childData: '这是子组件的数据'
}
}
}
</script>