Nommé Slot Vue
<slot name="header"></slot>
<!--usage-->
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
Bug Killer
<slot name="header"></slot>
<!--usage-->
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>/*first component*/
<template>
<header>
<h2>{{ msg }}</h2>
</header>
<div>
<the-card cardTitle="About Me">
<p>Hi,Iam Mamunur Rashid Rimon, blah blah</p>
</the-card>
<the-card cardTitle="Apple iPhone 12 Pro">
<img
src="https://fdn2.gsmarena.com/vv/bigpic"
alt=""
/>
<p>
Versions: A2407 (International); A2341 (USA)
A2408 (China, Hong Kong)
</p>
</the-card>
<the-card cardTitle="Services">I
<ul>
<li>Web Development</li>
</ul>
</the-card>
</div>
</template>
<script>
import TheCard from "./TheCard.vue";
export default{
data(){
return{
msg: "Vue3 Bangla Tutorial"
};
},
components:{
TheCard
};
</script>
/*first component*/
/*second component*/
<template>
<div class="the-card">
<div class="the-card_title">
{{ cardTitle }}
</div>
<div class="the-card_body">
<slot>default value if slot is empty</slot>
</div>
</div>
</template>
<script>
export default{
props: ["cardTitle"]
};
</script>
/*second component*/