what can't be passed by vue slot props?

user_15382341 0
Viewed 71

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?

vue.js reactjs javascript
1 Answers

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

user_146743210
Related