Vue组件插槽的使用

很酷的站长

发布于 2023-02-17 10:47:15

4200

发布于 2023-02-17 10:47:15

文章被收录于专栏：站长的编程笔记

1. 什么是插槽

插槽的作用: 让封装的组件更加具有扩展性

插槽就是子组件提供给父组件使用的一个占位符，用 <slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如：html、组件等，填充的内容会替换到子组件中的 <slot></slot> 标签

2. 基础使用

<div id="app">
<parent>
12323
</parent>
</div>

<script>
var par = {
template: `<div>hello <slot></slot></div>`
}

let vm = new Vue({
el: '#app',
components: {
parent: par
}
})
</script>

3. 具名插槽

v-slot: 可以简写为 #

<div id="app">
<layout>
<template v-slot:header>
123
</template>
<template #main>
456
</template>
<template #footer>
789
</template>
</layout>
</div>

<script>
var layout = {
template: `
<div>hello
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
}

let vm = new Vue({
el: '#app',
components: {
layout: layout
}
})
</script>