组件的插槽
- 让封装的组件更有扩展性
- 让使用者可以决定组件内部的一些内容要展示什么
在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性
- 不设默认值
<div id = 'app'>
<cpn1> <button>anniu</button> </cpn1>
<cpn1><span>span</span></cpn1>
<cpn1> <button>anniu</button> <span>span</span> </cpn1>
<cpn1></cpn1>
</div>
<template id = 'cpn1'>
<div>
<h2>我是组件</h2>
<slot></slot>
</div>
</template>
- 设置默认值
<div id = 'app'>
<cpn1> <button>anniu</button> </cpn1>
<cpn1><span>span</span></cpn1>
<cpn1> <button>anniu</button> <span>span</span> </cpn1>
<cpn1></cpn1>
</div>
<template id = 'cpn1'>
<div>
<h2>我是组件</h2>
<slot> <div>默认值</div> </slot>
</div>
</template>