app.vue
<titled-frame>
<template v-slot="{ user1 }">
My Image’s Title
{{ user1.lastName}}
<!-- {{ user.lastName }} -->
</template>
</titled-frame>
<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>
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",
},
};
}
};
</script>
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>
顯示： My Image’s Title Jun 1111111 測試solt solt名header titletitletitletitle