vue 的作用域插槽

让父组件中提供的插槽内容访问子组件中的数据。在子组件定义的插槽默认值，在父组件中修改子组件中的插槽默认值，但是数据user在子组件，父组件拿不到，想拿到就用下面的方法

v-bind:user="user"

v-slot:default="slotPro"

例如：lastName修改为firstName

父组件

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{ message }}</p>
    <CurrentUser>
      <template v-slot:default="slotPro">
        {{ slotPro.user.firstName }}
      </template>
    </CurrentUser>
  </div>
</template>

<script>
import CurrentUser from '@/components/CurrentUser.vue'
export default {
  data () {
    return {
      message: 'hello world!'
    }
  },
  components: {
    CurrentUser
  }
}
</script>

<style scoped>
</style>

子组件

<template>
<div>
  <span>
    <slot v-bind:user="user">{{ user.lastName }}</slot>
  </span>
</div>
</template>

<script>
export default {
  data () {
    return {
      user: {
        lastName: 'last',
        firstName: 'first'
      }
    }
  }
}
</script>

<style>
</style>