vue-test4 -----插槽

<template>
  <!--
  <Main class="cccc"/>
  <component-a/>
  -->
  <slot-demo>
    <template #header="slotProps">
      <p>插槽标题-{{slotProps.msg}}</p>
    </template>
    <template v-slot:low>
      <p>插槽内容</p>
    </template>
  </slot-demo>
</template>
<script>
import Main from "@/components/Main.vue";
import ComponentA from "@/components/ComponentA.vue";
import SlotDemo from "@/components/SlotDemo.vue";
export default {
  components: {SlotDemo, ComponentA, Main}
}
</script>
<style>

</style>

<template>
  <slot name="header" :msg="msg"></slot>
  <slot name="low"></slot>
<h3>插槽基础知识</h3>

</template>

<script>
export default {
  name: "SlotDemo",
  data(){
    return{
      msg:"子组件元素"
    }
  }
}
</script>

<style scoped>

</style>