js components. We will explore how we can compose components like normal HTML. If we want to write reusable components similar to HTML button style, where we can pass some content between the opening and closing tag, we will need an HTML feature called Slots. Slots are written like this.
Slots is a default HTML tag and it represents a placeholder in the components tree. Slots in Vue works the same way. They create a placeholder for one or more elements inside your component. If we want to create a reusable button component, we can extract the button to its own component.
Vue Style Guide recommends calling names of the components with multi-word names, like appButton or baseButton. In our case, we will go with app button. You can find more information in the view style guide. Let's create our button first.
We can create a prop and pass text into it. Using a prop to set a button text our components would look something like this. To use our component first we need to import it. Once we imported the app button from our components folder we need to register it.
Once we have the component imported we can use it like this. Nothing has changed in our button. This works, but it doesn't look like a native button. It would be much nicer if we can write something like this.
To make this happen, we will need slots. Let's see how we can refactor our component to use slots instead. In our AppButton component, we can now remove props entirely and replace the text with a slot. js button component, which looks like a native button.
Let's see it in action. As you can see, they all work. In the next lesson, we will cover the topic how we can make this button interactive. js slots, I wanted to mention that this feature also exists in other frameworks.
If you come from Angular background, then you are probably familiar with ng-content. And if you come from React world, then it would be children. js. In my opinion, Vue slots are one of the most powerful component design features.
js components. We will explore how we can compose components like normal HTML. If we want to write reusable components similar to HTML button style, where we can pass some content between the opening and closing tag, we will need an HTML feature called Slots. Slots are written like this.
Slots is a default HTML tag and it represents a placeholder in the components tree. Slots in Vue works the same way. They create a placeholder for one or more elements inside your component. If we want to create a reusable button component, we can extract the button to its own component.
Vue Style Guide recommends calling names of the components with multi-word names, like appButton or baseButton. In our case, we will go with app button. You can find more information in the view style guide. Let's create our button first.
We can create a prop and pass text into it. Using a prop to set a button text our components would look something like this. To use our component first we need to import it. Once we imported the app button from our components folder we need to register it.
Once we have the component imported we can use it like this. Nothing has changed in our button. This works, but it doesn't look like a native button. It would be much nicer if we can write something like this.
To make this happen, we will need slots. Let's see how we can refactor our component to use slots instead. In our AppButton component, we can now remove props entirely and replace the text with a slot. js button component, which looks like a native button.
Let's see it in action. As you can see, they all work. In the next lesson, we will cover the topic how we can make this button interactive. js slots, I wanted to mention that this feature also exists in other frameworks.
If you come from Angular background, then you are probably familiar with ng-content. And if you come from React world, then it would be children. js. In my opinion, Vue slots are one of the most powerful component design features.