1、插槽的内容
- 文字
- html（div，span之类的标签）
- 组件
文字：
组件里的内容是不能显示的，用了slot就可以显示出来
<body>
<div id="app">
<my-component>
hello
</my-component>
</div>
<script>
Vue.component('my-component',{
template:`<div class="main">
<div>模板里div的内容</div>
<slot></slot>
</div>`
})
var app = new Vue({
el:'#app'
})
</script>
</body>
插槽内容1.png
html标签：
这里的slot渲染的p标签
<body>
<div id="app">
<my-component>
<p>hello</p>
</my-component>
</div>
<script>
Vue.component('my-component',{
template:`<div class="main">
<div>模板里div的内容</div>
<slot></slot>
</div>`
})
var app = new Vue({
el:'#app'
})
</script>
</body>
插槽内容2.png
组件：
插入组件呢？如下
<body>
<div id="app">
<my-component>
hello
<my-child></my-child>
</my-component>
</div>
<script>
Vue.component('my-component',{
template:`<div class="main">
<div>模板里div的内容</div>
<slot></slot>
</div>`
})
Vue.component('my-child',{
template:'<span>world</span>'
})
var app = new Vue({
el:'#app'
})
</script>
</body>
插槽内容3.png
注意：
如果 <my-component> 没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
2、后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染
这里设置一个submit-button组件，组件里没有内容。设置一下模板，模板里是button按钮。
<body>
<div id="app">
<submit-button>
</submit-button>
</div>
<script>
Vue.component('submit-button',{
template:`<button type="submit">
<slot></slot>
</button>`
})
var app = new Vue({
el:'#app'
})
</script>
</body>
后备内容1.png
这里把slot里面放入submit。submit-button里还是没有内容
Vue.component('submit-button',{
template:`<button type="submit">
<slot>submit</slot>
</button>`
})
后备内容2.png
如果submit-button里面放入内容，那么slot里面的内容会被覆盖，就不会显示出来
<div id="app">
<submit-button>
save
</submit-button>
</div>
后备内容3.png
3、具名插槽
我们写一个base-layout的组件，模板内容有header、main、footer标签，里面都有slot，slot内容为空。header和footer分别设置了name，main没有设置name
<body>
<div id="app">
<base-layout>
</base-layout>
</div>
<script>
Vue.component('base-layout',{
template:`<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>`
})
var app = new Vue({
el:'#app'
})
</script>
此时渲染成：
具名插槽1.png
- 此时我们给组件上内容，在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。
- 看下面代码，中间段落没有加template和v-slot，因为模板里main标签里的slot没有name。而头部和尾部都加上了，并且v-slot对应的值就是模板里slot设置的name
<div id="app">
<base-layout>
<template v-slot:header>
<h1>这是头部</h1>
</template>
<p>中间段落</p>
<p>中间段落</p>
<template v-slot:footer>
<p>这是尾部</p>
</template>
</base-layout>
</div>
具名插槽2.png
也可以给main加上template和v-slot，渲染结果和上面一样：
<template v-slot:default>
<p>中间段落</p>
<p>中间段落</p>
</template>
网友评论