组件插槽（slot）
组件插槽（slot）
在子组件中用 slot 标签预留一个位置，slot标签内的内容即为后备内容。
后备内容：当父组件不在插槽内添加内容时，插槽显示的内容
<div class="modal-content">
<slot>这是个弹框</slot>
<div class="footer">
<button @click="close">close</button>
<button @click="confirm">confirm</button>
</div>
</div>而在父组件中
<Modal :visible.sync="visible">
<div>插槽内容</div>
</Modal>
这里子组件叫 Modal即子组件中的插槽（slot）内容为父组件使用子组件时，标签后的内容（除非没有）
当我们使用多个插槽时，我们需要区分插槽来使用它，所以，我们可以在 slot标签内加入 name属性来定义，此时有name的插槽叫“具名插槽”，而没有名字的默认插槽叫“匿名插槽”。
在定义插槽名字之后，我们可以在使用插槽的内容中添加 v-slot:插槽名 属性来完成插入
<template v-slot:header>
<h1>Modal title</h1>
</template>注意的是， v-slot 是绑定操作，后面不需要引号，跟的也是冒号，而 name 后面需要‘=’加上引号
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录