Skip to content

Instantly share code, notes, and snippets.

@minhntm
Last active December 30, 2020 08:14
Show Gist options
  • Save minhntm/3be5affcf964c67d70603aed19cc775e to your computer and use it in GitHub Desktop.
Save minhntm/3be5affcf964c67d70603aed19cc775e to your computer and use it in GitHub Desktop.
How to use Vue's slot
<template>
<div class="book">
<slot name="title"
:bookTitle="bookTitle"
/>
</div>
</template>
<script>
export default {
data() {
return {
bookTitle: 'Child Providing Data'
}
}
}
</scipt>
<template>
<Book>
<template v-slot:title="slotProps">
<h1>{{ slotProps.bookTilte }}</h1>
</template>
</Book>
</template>
// or
<template>
<Book>
<template v-slot:title="{ bookTitle }">
<h1>{{ bookTilte }}</h1>
</template>
</Book>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment