vue slot的使用
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue slot的使用相关的知识，希望对你有一定的参考价值。
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
以上是关于vue slot的使用的主要内容，如果未能解决你的问题，请参考以下文章