vue slot的使用
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'
titledFrame.vue
<template>
<div class="titled-frame">
<span>
<slot v-bind:user1="user"> {{ user.lastName }}</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",
};
}
};
</script>
在子组件 solt上可以v:bind:传参名="值"
在父组件使用的时候：
<template v-slot="{ user1 }">
My Image’s Title
{{ user1.lastName}}
</template>
