需要在子组件的插槽定义中使用v-bind,使用了v-bind绑定的名称就可以在父组件中使用了。例如本例中的user
<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>