vue作用域插槽

如何父组件使用子组件数据：
1：子组件通过<slot :user="user"> </slot>把数据传入插槽中
2：在父组件中<template v-slot:default="sprops"{{sprops.user.age}}</template> 把插槽中数据传入，并命名为sprops，然后就可以使用子组件数据了。

子组件

<template>
  <h1>
<!--:user="user" 就把子组件中数据传给了slot-->
    <slot :user="user">
    </slot>
  </h1>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name:"wxy",
        age:20
      }
    }
  }
}
</script>
<style></style>

父组件

<template>
  <div>
<!--父组件中不传值，显示子组件内容，否则显示父组件中内容-->
<!--父组件中使用子组件数据（作用域插槽）-->
<!--子组件通过：user="user" 把数据传给了插槽，父组件v_slot=""对传来的数据命名，就可以使用子组件内容了-->
    <current-user>
      <template v-slot:default="sprops">
        {{sprops.user.age}}
      </template>
    </current-user>
  </div>
</template>
<script>
import CurrentUser from './CurrentUser';
export default {
  component:{
    CurrentUser
  }
}
</script>
<style></style>