Vue——v-slot父组件调用子组件内的值

首先声明子组件，设置3个slot插槽，分别为header，main和默认插槽

<template>
  <div>
    <!-- 这是子组件 -->
    <slot name="header" v-bind:user="user">{{ user.lastName }}</slot>
    <!-- header插槽默认显示 user.lastName，即firstName123-->
    <slot name="main" v-bind:main="main">  {{main.first}}</slot>
    <slot>我是默认插槽</slot>
  </div>
</template>

<script>
export default {
  name: "slot1",
  data() {
    return {
      user: {
        firstName: "firstName123",
        lastName: "lastName123",
      },
      main: {
        first: "firstmain",
        second: "secondmain",
      },
    };
  },
};
</script>

在父组件中调用

<template>
  <div>
    <!-- 这是父组件 -->
    <Slot1>
      <template #header="slotProps">{{ slotProps.user.firstName }}</template>
      <template #main="slotMain">{{ slotMain.main.second }}</template>
      
      <!-- #header表示对应header插槽，后面的参数表示调用子组件slot1内部的参数的形式 -->
      <!-- 我们使用slotProps.user.firstName在header中展示
      user.firstName而不是默认的user.lastName,slotProps可以自己取名-->

    </Slot1>
    <Slot1>
      <template #main></template>
    </Slot1>
  </div>
</template>

<script>
import Slot1 from "./slot1";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  components: {
    Slot1,
  },
};
</script>

实际效果