CODEWITHSUNDEEP
vue.jsvue-componentvue-props
goodpixels
goodpixels

Reputation: 523

How to pass an instantiated Vue component as a prop in Vue.js?

I want to pass an instantiated Vue Component as a prop to antoher component and then render it, like so:

<Button :icon=<IconComponent size="25" /> :link="http://wikipedia.org">Click here to visit Wikipedia</Button>

This is at least how I would do this in React. How can I achieve the same with Vue?

Upvotes: 1

Views: 1176

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You need to use named slots in the child component :

<template>
  <button>
    <slot name="icon"></slot>
    <slot></slot>
 </button>
</template>

in parent component:

<Button  link="http://wikipedia.org">
 <template #icon>
    <IconComponent size="25" />
 </template>
Click here to visit Wikipedia</Button>

Upvotes: 2

Related Questions