vue官方文檔（19) :讓插槽内容通路子元件中的資料

<template>
<div >

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

<current-user>
  <template v-slot="{user}">
    {{ user.firstName }}
  </template>
</current-user>

<current-user>
  <template v-slot="{user:person}">
    {{ person.firstName }}
  </template>
</current-user>

</div>


</template>


<script>

// eslint-disable-next-line
//import { Lazyload } from 'vant';
//import {Toast} from 'vant';
//import {Notify} from 'vant'
import Vue from 'vue'


Vue.component('current-user', {
  data(){
    return {
      user:{firstName:'david',lastName:'beckham'}
    }

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


export default {
  components: {
    
  },
  data() {
    return {
    };
  },
    mounted() {
   
  },
  methods: {
    
  },
};
</script>

<style >
  

</style>