Component slots vue js 3

 

Component slot;-

//TheCard.vue 

<template>

<div class="the-card">

    <div class="the-card_title">

        {{cardtitle}}

    </div>

    <div class="the-card_body">

        <slot>default slot value</slot>

    </div>

</div>

    

</template>

<script>

export default {

    props: ['cardtitle']

    

}

</script>

<style scoped>

.the-card{

    width: 200px;

    border: 1px solid navy;

    min-height: 200px;

    margin: 22px auto;

}

.the-card_title{

    background: navy;

    padding: 5px 11px;

    color:#fff;

}

.the-card_body{

    padding: 11px;

}

.the-card img{

    height: 111px;

}

</style>

.......................

//Ape.vue

<template>

    <div>

      <header>

      <h1>{{msg}}</h1>

    </header>

    <div>

      <the-card cardtitle="About Me">

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, libero.</p>

      </the-card>

      <the-card cardtitle="Apple iphone">

        <img src="https://fdn2.gsmarena.com/vv/bigpic/apple-iphone-12-pro-max-.jpg" alt="">

        <p>

          Released 2020, November 13

          228g, 7.4mm thickness

          iOS 14.1, up to iOS 14.7

          128GB/256GB/512GB storage, no card slot

        </p>

      </the-card>

      <the-card cardtitle="Skills">

        <ul>

          <li>Laravel Framework</li>

          <li>Vue jS</li>

          <li>Javascript</li>

          <li>Bootstrap</li>

          <li>Html5</li>

        </ul>

      </the-card>

      <the-card cardtitle="Test card">

      </the-card>

    </div>

      

    </div>

   

</template>

<script>

// import HelloWorld from './components/HelloWorld.vue'

 import TheCard from './components/TheCard.vue'

export default {

  data(){

    return{

      msg: "hello vue js 3"

    }

  },

  components: {

   TheCard

  },

};

</script>

<style  scoped>

</style>

.................