Slot Vue Js
Vue.js - The Progressive JavaScript Framework. En este ejemplo, hemos elegido nombrar al objeto que contiene todos nuestras propiedades del slot “slotProps”, pero puede usar el nombre que prefiera. Vue 2.6.0 で v-slot ディレクティブが導入され、まだサポートされているものの slot および slot-scope 属性に代わる改善された API を提供しています。 v-slot を導入する理由は、この RFC に完全に記述されています。.
Tutorial
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.
Oftentimes you will need to allow your parent Vue components to embed arbitrary content inside of child components. (Angular devs, you know this as transclusion or content projection.) Vue provides an easy way to do this via slots.
Slots helps us to pass the data between opening and closing component tags. In vue.js props are used to pass the data to its child components, but it is hard to pass when we have a complex code. In such cases slots can be used. Let’s create a new component called Post by adding the slot element.
Basic Usage
To allow a parent component to pass DOM elements into a child component, provide a <slot></slot> element inside the child component. You can then populate the elements in that slot with <child-component><p>MyParagraph</p></child-component>.
Vue.js Slot V-if
Note: If there is no <slot></slot> element in the child’s template, any content from the parent will be silently discarded.
Fallback Content
If the parent does not inject any content into the child’s slot, the child will render any elements inside its <slot></slot> tag, like so:
Vue Js Slot Event
Named Slots
Having one slot to inject content into is nice and all, but oftentimes it would be preferable to be able to inject various types of content at different locations in the child component. Say you’re making a burger component. You want the top and bottom buns to be predictably at the top and bottom of the burger, (don’t you?) but also want to be able spread things on the bun halves.
Vue allows us to do this by way of named slots. Named slots are simply slots with a name attribute <slot name='slotName'></slot> to allow for namespaced content injection.
Slot Vue Js
Vue Slots Jsx
Obviously I don’t have a clue as to how to make burgers, but that should at least serve as an understandable guide to Vue slots. Enjoy!