Skip to content

what can’t be passed by vue slot props?

In official react docs, It says the difference between ‘other libraries’s slot’ and ‘react’s props.children’ is as follows :

This approach may remind you of “slots” in other libraries but there are no limitations on what you can pass as props in React.
https://reactjs.org/docs/composition-vs-inheritance.html

And it sounds like there are some things can’t pass through a ‘vue slot’. Is there any thing can’t be passed by vue slot’s props?

Answer

In vue you have props as well. The difference and what may have been confusing you is that:

  • (vue) props === (react) props
  • (vue) slots === (react) props.children

You can pass data through props in both frameworks/libraries, but what you place inside <YourComponent>[content]</YourComponent will in vue terms be a slot and in react terms be accessible through props.children.

Let’s say we have a popup/modal component which sole purpose is to act as a frame for the actual popup/modal content:

// parent component
<Modal>
    <p>Watch out! Do you want to continue</p>
    <button>Yes</button>
    <button>No</button>
</Modal>

Then you would have the modalcomponent itself

// react
<div>
    // this will output whatever you put inside the
    // <Modal> tags in you parent component
    {props.childen}
</div>

// vue
<div>
    // the <slot> tag works the same way
    // as React's {props.children}
    <slot></slot>
</div>

Read more about vue slots here and vue props here.

When you’re more familiar with the concepts you can read about vue’s named slots here