Vue 具名插槽详解：通俗易懂的理解与示例
具名插槽就像一个占位符，可以在父组件中定义一些内容，然后在子组件中使用这些内容来填充具名插槽的位置。具名插槽可以让我们更好地控制子组件的渲染行为，可以根据具名插槽的名字来选择不同的内容。
举个例子，假设我们有一个`
<modal>
<template v-slot:header>
<h2>这是模态框的标题</h2>
</template>
<template v-slot:body>
<p>这是模态框的内容</p>
</template>
</modal>
在`
<div class="modal-header">
<slot name="header">默认标题</slot>
</div>
<div class="modal-body">
<slot name="body">默认内容</slot>
</div>
这样，如果父组件没有定义`header`和`body`插槽的内容，那么就会使用默认的标题和内容。如果父组件定义了这些插槽的内容，那么就会使用父组件的内容来替换默认的内容。
原文地址: https://www.cveoy.top/t/topic/nnzS 著作权归作者所有。请勿转载和采集!