Referring to this link, i am trying to implement the same example of Scoped Slots
provided in the url.
as shown in the following code snippet, i created the slot named scopedSlot
and specified some properties text
and count
:
<footer>
<slot name="footer"></slot>
<div>
<slot name="scopedSlot" :text="greetingMessage" :count="1"></slot>
</div>
</footer>
in the App.vue
, i am trying to bind on the properties of the slot as shown in the following code snippet:
<template #scopedSlot v-slot="slotProps">
{{slotProps.text}} {{ slotProps.count }}
</template>
but the latter code generates the following error on v-slot
:
An element cannot have multiple 'v-slot' directives
please let me know how to correctly bind on a slot properties
App:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<BaseLayer_0>
<template #header>
<h1>header</h1>
</template>
<template #default>
<p>default</p>
</template>
<template #footer>
<p>footer</p>
</template>
<template #scopedSlot v-slot="slotProps">
{{slotProps.text}} {{ slotProps.count }}
</template>
</BaseLayer_0>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import BaseLayer_0 from './components/BaseLayer_0.vue'
export default {
name: 'App',
components: {
HelloWorld,
BaseLayer_0
}
}
</script>
BaseLayer_0
<template>
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
<div>
<slot name="scopedSlot" :text="greetingMessage" :count="1"></slot>
</div>
</footer>
</template>
<script>
export default { name: 'BaseLayer_0',
}
image:
The correct syntax is
<template #scopedSlot="slotProps">
or
<template v-slot:scopedSlot="slotProps">
The #
is shorthand for v-slot:
, so in your initial code, you were assigning to the scopedSlot without using slotProps, and then again to the default slot, this time using slotProps, and Vue complained.