Is there any way to pass a DOM element as a prop in Vue 3?

Viewed 618

I'm super new to Vue. While I don't normally do this, I think something like this would be possible in React + JSX (untested):

render() {
  const el = <p>Blah <a href="https://example.com">bloop</a> bleh</p>
  return (
    <div>
      <CustomReactComponent someProp={el}
    </div>
  )
}

Where CustomReactComponent would be able to render the element out of this.props.someProp.

Can I achieve this in Vue?


For the curious, my use case is similar to my very untested React example above. I would like some, but not all parent components of a common tiny component to pass in some text to display somewhere. Except I'd like to include links wherever I please, so I need <a> tags in there. I figured I could make that work by passing a whole <p> or <span> element as a prop.

Alternate solutions welcome!

1 Answers

As Estus said in their comment, this is what the slots feature is for.

Related