Vue3:插槽（slot，useSlots，useAttrs）

1.插槽 

       1. 组件FancyButton

  <FancyButton>
          Click me! <!-- 插槽内容 -->
  </FancyButton>

        2.组件FancyButton的模板是这样的 

<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>
 

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 

        3.渲染DOM

<button class="fancy-btn">Click me!</button>
 

2.defineExpose

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>
 

 

  当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)  

3.useSlots() 和 useAttrs()

  在 <script setup> 使用 slots 和 attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：

<script setup>

import { useSlots, useAttrs } from 'vue'

const slots = useSlots()

const attrs = useAttrs()

</script>      

  useSlots 和 useAttrs 是真实的运行时函数，它的返回与 setupContext.slots 和 setupContext.attrs 等价。它们同样也能在普通的组合式 API 中使用。