示例
CourseGoals.vue
<template>
<ul>
<li v-for="goal in goals" :key="goal">
<slot :item="goal" another-prop="..."></slot>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
goals: [
'Learn how to use Vue',
'Build a simple app with Vue',
'Become an expert in Vue'
]
}
}
}
</script>
App.vue
<template>
<div>
<the-header></the-header>
<badge-list></badge-list>
<user-info :full-name="activeUser.name" :info-text="activeUser.description" :role="activeUser.role"></user-info>
<!-- <course-goals>
<template #default="slotProps">
<h2>{{ slotProps.item }}</h2>
<p>{{ slotProps['another-prop'] }}</p>
</template>
</course-goals> -->
<course-goals #default="slotProps">
<h2>{{ slotProps.item }}</h2>
<p>{{ slotProps['another-prop'] }}</p>
</course-goals>
</div>
</template>
<script>
import TheHeader from './components/TheHeader.vue';
import BadgeList from './components/BadgeList.vue';
import UserInfo from './components/UserInfo.vue';
import CourseGoals from './components/CourseGoals.vue';
export default {
components: {
//'the-header': TheHeader,
TheHeader,
BadgeList,
UserInfo,
CourseGoals
},
data() {
return {
activeUser: {
name: 'Maximilian Schwarzmüller',
description: 'Site owner and admin',
role: 'admin',
},
};
},
};
</script>
<style>
html {
font-family: sans-serif;
}
body {
margin: 0;
}
</style>
通过slotProps拿到组件中slot所有属性。