vue 3.0 slot和slot-scope

子组件

<template>
  <div>
    子类
    <slot :studentSon="student" name="stu"> </slot>
    --- 后面是子的
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    student: Object,
  },
})
export default class PageVueSlotScopeCopm extends Vue {
  student!: any;
}
</script>

父组件

<template>
  <div class="p-clip-path">
    <h3 @click="handleOpen">slot-scope</h3>
    <span>用于子组件将数据传递过来，父类使用。</span>

    <div class="p-display">
      <m-c :student="studentInfo">
        <template v-slot:stu="prop"> 父页面内容 --{{ prop.studentSon.name }} </template>
      </m-c>
    </div>
  </div>
</template>

<script lang="ts">
import MC from "./compontent.vue";
import { Options, Vue } from "vue-class-component";

@Options({
  components: {
    MC,
  },
})
export default class PageVueSlotScope extends Vue {
  studentInfo = {
    name: "张三",
    age: 18,
  };
}

这里是将数据studentInfo传到子组件，然后子组件通过slot 里面 name的属性凹槽，父类就通过v-slot:name 把子组件改变，v-slot:stu="prop"是将子组件里面的:studentSon="student"的数据交给父组件调用，所以可以显示出来