<template>
  <ChildComponentA>
    <!--  具名插槽的调用形式 <template v-slot:插槽名称>  -->
    <template v-slot:header>
      <P>提示</P>
    </template>
    <!--  带有参数的插槽引用  <template v-slot:插槽名称="参数代理"> 可以通过访问子组件数据-->
    <template v-slot:default="slot_data_types">
      <p>我的错误是<span>{{ slot_data_types.types['500'] }}</span></p>
    </template>
    <!--  v-slot可以简写为#  -->
    <!--  包含多个参数的传递时，可以使用对象格式, 按照子组件的传值顺序进行映射， 参数名需要与子组件一致  -->
    <template #footer="{types, sources}">
      <div>错误来自：{{ sources['page'] }} - {{ types['404'] }}</div>
    </template>
  </ChildComponentA>
</template>

<script>
import ChildComponentA from "@/components/ChildComponentA.vue";

export default {
  components: {ChildComponentA},
}
</script>

<style scoped>

</style>
