三种:默认插槽、具名插槽、作用域插槽
- 默认插槽
默认插槽就是指,的作用类似于占符。
//定义一个全局子组件
Vue.component('child', {
template: '<div><slot></slot></div>',
});
var vm = new Vue({
el: '#root',
});
<!--引用child组件-->
<div id="root">
<child>
<span>我是占位符</span>
</child>
</div>
- 上述的子组件 child 里定义的 slot 被 span 标签给代替了,如果子组件里没有定义 slot,则 span 标签会被直接忽略,且一个子组件里只能定义一个单个插槽。
- 具名插槽
可以通过设置 name 属性,指定显示的位置
定义一个 组件:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
- 作用域插槽
父组件替换插槽标签,但是内容由子组件来提供
<body>
<div id="root">
<child>
<!--定义一个插槽,该插槽必须放在template标签内-->
<template slot-scope="props">
<li>{
{
props.value}}</li>
</template>
</child>
<!--!--定义不同的渲染方式-->
<child>
<!--slot-scope="props"作用是使props指向子组件中定义的<slot>-->
<template slot-scope="props">
<h1>{
{
props.value}}</h1>
</template>
</child>
</div>
</body>
<script>
//定义一个全局子组件
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3, 4],
};
},
template:
'<div><ul><slot v-for="value in list" :value=value></slot></ul></div>',
});
var vm = new Vue({
el: '#root',
});
</script>