<body>
<div class="app">
<child> //假注释。。。 这里的span标签会替代子组件child中的slot标签 当child标签中没有任何东西的时候 会显示默认值 就是那句话
<span>hehaha</span>
</child>
</div>
</body>
<template id="tpl">
<div>
<span>haha</span>
<slot>当父组件没传值过来 就显示这个</slot>
</div>
</template>
<script>
Vue.component(‘child‘,{
template:‘#tpl‘,
})
const app = new Vue({
el:‘.app‘
})
</script>
<body>
<div class="app">
<child>
<div slot="reserved">reserved---保留的</div>
<div slot="ww">ww---帅气的</div>
</child>
</div>
</body>
<template id="tpl">
<div>
<!-- 原本每一个slot插槽都会显示出 child 标签包裹的所有内容 解决这个问题方式就是具名插槽 给上面每一个div 命名slot 值 然后再 slot 插槽中使用name属性绑定命名 -->
<slot name="reserved">当父组件没传值过来 就显示这个</slot>
<span>haha</span>
<slot name="ww">当父组件没传值过来 就显示这个</slot>
</div>
</template>
<script>
Vue.component(‘child‘,{
template:‘#tpl‘,
})
const app = new Vue({
el:‘.app‘
})
代码中有解释了。。。
原文：https://www.cnblogs.com/wangweigit3077/p/10363643.html