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>
Add a comment
|
2 Answers
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>
answered Apr 13, 2021 at 11:04
Boussadjra Brahim
90k19 gold badges163 silver badges183 bronze badges
2 Comments
fancy56
hi thank you for your answer ! this wasnt what i was looking for, I would like sometimes to display a p tag instead of a h1 tag with the same text content, i guess we need to do a if else condition
Boussadjra Brahim
You could do
<MyComponent tag="p" />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/>
