详解vue 2.6 中 slot 的新用法

<template>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<slot name="header"></slot>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>
</template>

现在，使用它：

<!-- 使用 my-modal.vue -->
<template>
 <my-modal>
 <template #header>
 <h5>大家最棒!</h5>
 </template>
 <template #body>
 <p>大家加油</p>
 </template>
 <template #footer>
 <em>大家好样的!</em>
 </template>
 </my-modal>
</template>

上述类型的插槽用例显然非常有用，但它可以做得更多。

复用函数

Vue组件并不完全是关于HTML和CSS的。它们是用JavaScript构建的，所以也是关于函数的。插槽对于一次性创建函数并在多个地方使用功能非常有用。让我们回到模态示例并添加一个关闭模态的函数

<!-- my-modal.vue -->
<template>
<div class="modal" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <slot name="header"></slot>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
 </button>
 </div>
 <div class="modal-body">
 <slot name="body"></slot>
 </div>
 <div class="modal-footer">
 <slot name="footer" :closeModal="closeModal"></slot>
 </div>
 </div>
 </div>
</div>
</template>
<script>
export default {
 //...
 methods: {
 closeModal () {
 // 关闭对话框时，需要做的事情
 }
 }
}
</script>

当使用此组件时，可以向 footer 添加一个可以关闭模​​态的按钮。 通常，在Bootstrap模式的情况下，可以将

data-dismiss =“modal” 

添加到按钮来进行关闭。

但我们希望隐藏Bootstrap 特定的东西。 所以我们传递给他们一个他们可以调用的函数，这样使用者就不会知道我们有使用 Bootstrap 的东西。