![]() This is the reverse of the traditional property passing in Vue. Then, you’d pass the value of the property to the child component so the data becomes a property in the child component.īut with scoped slots, you’d pass properties from your child components into a scoped slot, then access them from the parent component. To pass a property in Vue, you would define the data in the parent component and assign a value to the data. If we remove the send button in the 5th line of App.vue, we would see that the text in the button changes from Submit to Send. So, we may want to assign fallback content to our property from way, if no property is assigned in App.vue or other components accessing data from Button.vue, the component can fall back to the fall back content: //Buttons.vue In the above example, we’ve passed the counter property from Button.vue to App.vue and added a button by using vue-slots. Import Buttons from "./components/Buttons" įont-family: "Avenir", Helvetica, Arial, sans-serif We are going to create a simple program that binds data from the child component ( Buttons.vue) to the parent component ( App.vue) according to the input of the user: // Button.vue This way, we can render slots based on the use case - especially from the input of the user, like when we manipulate the DOM. Now, let’s dig into some more advanced methods of passing slots by binding expressions. ![]() Import Buttons from './components/Buttons' This way, the name of the slot will be passed as v-slot‘s argument: //Buttons.vue We can also name our templates using the v-slot directive on a. This method is called naming slots with a name attribute. We call the named slot in our child component by adding to the position where we want our slot to be called. We name slots by adding slot="name" to the property in the parent component we want to pass to the child component. This way, we can call the slots we want from the child component by calling their names. For instance, we may not want all of the slots to appear together when we call them. This is very essential when we have more than one property to pass as slots - we’ll need to assign names to slots. What if we want to control how the buttons are rendered in Buttons.vue? We’ll probably want a green button to be rendered first, and a red button last.īelow is an example that illustrates how we can reuse components by rendering them differently: //App.vueĪbove, we’ve named our slots. ![]() This is because you cannot pass properties of a component from one component ( App.vue) to another component ( Buttons.vue) simply by embedding the property in the child component tag. When we remove from App.vue, we’ll see that only List of Buttons is shown. We’ve also called them into our Buttons.vue. In the above example, we have created some buttons in our template. ![]() Import buttonHelper from './components/Buttons.vue' We’re going to create some buttons in App.vue and allow the buttons to be reused by Buttons.vue: /**App.vue**/ Now, we’re going to dive in with some examples showcasing Vue slots and talk about how to make use of them. So, we understand the whole concept from the definition of slots - it’s about making components reusable. In this article, I’ll help you understand the concept of Vue slots and show you how to use them. All you need to do is embed them in slots. With Vue slots, you can turn a part or all of your components into reusable templates that will render differently based on different use cases. How cool would it be if you could reuse a component, but render the component differently in different places based on imputed properties? Pretty cool. Many times we may want to pass data from one component to another - not in the traditional parent to child component method, but in a method that makes the component reusable.Ĭomponents are used to make web templates that you can dump in different places to re-render the same kind of code. I also contribute to OSS in my free time. I love to share knowledge about my transition from marine engineering to software development to encourage people who love software development and don't know where to begin. Ukpai Ugochi Follow I'm a full-stack JavaScript developer on the MEVN stack. ![]()
0 Comments
Leave a Reply. |