Vue JS 3 Tutorial - 38 - Named Slots

vue 3 named slots   Dan vue 3 named slots

vue; export default { name: App, components: { MyComponent, }, }; script> copy slots-vue-3 As you can see from the above screenshot,

To use named scoped slots we need to name the slots inside the component with the 'name' attribute And to receive data from a named slot we need to refer to Vue 也允許在一個component 間有多個slot，此時必須使用Named Slot。 1 2 3 4 5 6 7 8 9 10 11, div class=container> header> slot name=header>

insia zaidi js is a functional component, and with Vue 3 This enables our component to pass whatever slots the consumer is trying to use, so it works with We need the v-slot directive to refer to named slots Named slots allow for more control over where the content is placed within the child component's template