1、具名插槽
父组件:
<template>
<div>
<div>
<h1>我是头部</h1>
<slot name="head"></slot>
</div>
<div>
<h1>我是尾部</h1>
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
子组件：
<template>
<div id="app">
<Index>
<template v-slot:footer>
<p>这里是footer</p>
</template>
<template v-slot:head>
<p>这里是head</p>
</template>
</Index>
</div>
</template>
<script>
import Index from './components/index.vue'
export default {
name: 'app',
components: {
Index
}
}
</script>
接下来我们将子组件插槽的名字调换一下，父组件不变
<template>
<div id="app">
<Index>
<template v-slot:head>
<p>这里是head</p>
</template>
<template v-slot:footer>
<p>这里是footer</p>
</template>
</Index>
</div>
</template>
<script>
import Index from './components/index.vue'
export default {
name: 'app',
components: {
Index
}
}
</script>
由此看出，即使父组件对插槽的填充的顺序打乱，只要名字对应上了，就可以正确渲染到对应的插槽中。即： 父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的
2、默认插槽(默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中)
<template>
<div id="app">
<Index>
<template v-slot:footer>
<p>这里是footer</p>
</template>
<template v-slot:head>
<p>这里是head</p>
</template>
<template>
<p>这里是默认插槽</p>
<p>aaaaa</p>
</template>
</Index>
</div>
</template>
<script>
import Index from './components/index.vue'
export default {
name: 'app',
components: {
Index
}
}
</script>
父组件插槽：
<template>
<div>
<div>
<h1>我是头部</h1>
<slot name="head"></slot>
</div>
<div>
<h1>我是默认插槽</h1>
<slot></slot>
</div>
<div>
<h1>我是尾部</h1>
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
注意：
父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。
如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就“不会”填充到子组件的任何一个插槽中
如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将“会” “全都”填充到子组件的每个默认插槽中。