CODEWITHSUNDEEP
vue.js
Hamid
Hamid

Reputation: 727

Put a slot in every component in Vue.js

I have a component called vue-select that is a third-party packaged that I installed. I want to put a slot template in every instance of this component. I mean I want to do something like this: 

<v-select>
 <span slot="no-options">
   <li>sample text</li>
 </span>
</v-select>

and I don't want to do this in every v-select that I have in my project. How can I do this to dry my code ? thank You :)

Upvotes: 0

Views: 116

Answers (1)

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

The slot is useful when you want to make parts of component's template different. If you always want it to be the same piece of template, then don't make it a slot. Simply add the markup you want into the template of the component.

This is similar to not putting something as an argument of a function if you don't want to be possible to change it.

function spin (element) {
  const angle = 360
}

If you want an option to have some common content but still change it sometimes, put the default content in the <slot> tags in the template of the component.

This is similar to adding a default argument in a function:

function spin (element, angle = 360) { }

If you already have a third-party component which has defined slots and their default content, and thus you cannot change them, wrap them in a different component firstly and then use the wrapper component in the rest of the code.

This is similar to adding a new function which calls the previous one, but hard-codes some arguments.

function halfSpin (element) {
  spin(element, 180)
}

Upvotes: 1

Related Questions