app.vue
<test-solt>
<div>1111111</div>
<template v-slot:header>
<div>solt名header</div>
</template>
<template v-slot:content="title">
<div>{{title.title}}</div>
</template>
</test-solt>
<titled-frame>
<template v-slot="{ user1 }">
My Image’s Title
{{ user1.lastName}}
<!-- {{ user.lastName }} -->
</template>
</titled-frame>
import titledFrame from './components/titledFrame'
import testSolt from './components/testSolt'
import TestSolt from './components/testSolt.vue'
components: {
titledFrame,
testSolt
}
titleFrame.vue
<template>
<div class="titled-frame">
<span>
<slot v-bind:user1="user"> {{ user.lastName }}112 </slot>
</span>
</div>
</template>
<script>
export default {
data() {
return {
user: {
firstName: "Fan",
lastName: "Jun",
},
};
},
created(){
},
components: {},
};
</script>
<style scoped>
</style>
testSolt.vue
<template>
<div>
<slot></slot>
测试solt
<slot name="header"></slot>
<slot name="content" v-bind:title="title">
</slot>
</div>
</template>
<script>
export default {
data() {
return {
title:'titletitletitletitle'
}
},
components: {
}
}
</script>
<style>
</style>
显示：
My Image’s Title Jun
1111111
测试solt
solt名header
titletitletitletitle