CODEWITHSUNDEEP
vue.jswrapper
ericobi
ericobi

Reputation: 549

How to use children in vue?

I am using React.js and Vue.js for frontend in my different projects.

In React, I am able to wrap templates with MyComponent like this.

    <MyComponent>
      <div>Here</div>
    </MyComponent>

And in MyComponent file

const MyComponent = ({children}) {
    return (
         <div className="my-component">{children}</div>
    )
}

How can I use this simple technique in Vue.js???

Upvotes: 3

Views: 379

Answers (1)

phuwin
phuwin

Reputation: 3270

You will want to use Slots.

Here is an example taken from vuejs doc

Component template:

<a :href="url">
  <slot></slot>
</a>

The code:

<navigation-link url="/profile">
  Your Profile
</navigation-link>

<slot></slot> will be replaced by what's inside the component tags. It will be rendered as:

<a url="/profile">
  Your Profile
</a>

Upvotes: 3

Related Questions