CODEWITHSUNDEEP
vue.js
fancy56
fancy56

Reputation: 11

Passing a HTML tag in vue js

I have a component which has a <p> tag inside, but would like it to be a <h1> tag sometimes, how to pass the prop ?

<template>
 <p>Hello world</p>
</template>

Upvotes: 1

Views: 412

Answers (2)

Areg
Areg

Reputation: 1485

Would recommend using slot for that component, which will be something like this

<template>
  <slot name="content"></slot>
</template>

When you use your component you can just do this

<Component>
  <template #content>
    Your content here, whatever you like
  <template/>
<Component/>

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Pass it as prop then use component to render it :

<template>
 <component :is="tag">Hello world</component >
</template>

<script>
export default{
  name:'MyComponent',
  props:['tag']
}
</script

then use the component like <MyComponent tag="h1" />

You could make MyComponent more dynamic accepting any content by using slots :

<template>
 <component :is="tag">{{msg}}</component >
</template>

<script>
export default{
  name:'MyComponent',
  props:['tag','msg']
}
</script

then use it like <MyComponent tag="h1" >hello world</MyComponent>

Upvotes: 1

Related Questions