插槽, 具名和匿名 以及 作用域

父级作用域这个, 是让父级能接受到子集传过来的 (子传父)

<template>
  <div >
    children页面
    <span>
      <slot :user='user'>{{user.lastName}}</slot>
    </span>
    <slot name ="header"></slot>
    <slot name="footer"></slot>
    <slot></slot>//这个是默认插槽的显示
  </div>
</template>

<script>
export default {
  data() {
    return {
       user:{lastName:"G",firstName:"wanwan"}
    }
  },
  methods: {
  
  }
};
</script>

父级作用里面:

<template>
  <div class="about">
    about页面
    <MYChildren >
      <template #default = 'slotProps'>
        {{slotProps.user.firstName }}
      </template>
     
     // <p>默认插槽default</p>
     //<template #header>
     //   具名插槽header
     // </template>
     // <template #footer>
     //   具名插槽footer
     // </template> 
    </MYChildren>
  </div>
</template>

<script>
import MYChildren from "@/components/Children.vue";
export default {
  data() {
    return { 
    };
  },
  components: {
    MYChildren
  },
  methods: {}
};
</script>

具名和匿名插槽,都是父传子


但是 我觉得奇怪的是, 具名插槽和匿名插槽能写在一个页面. 但是如果加上父级作用域, 就会报错, 不明白为什么