Vue setup()函数中context.slots为何返回空对象？（v3.2.x版本）

按照相关说明，Vue v3.2.x版本里setup()函数的context.slots应该能正常工作，但实际测试时却无法正确获取插槽内容。以下是复现该问题的代码：

复现代码 #

JavaScript部分 #

const { createApp } = Vue;

const myComponent = {
  template: '#my-component',
  setup(props, { slots }) {
    console.log(slots) // 此处打印的插槽对象为空
  }
}

const App = {
  components: { 
    myComponent
  }
}

const app = createApp(App)
app.mount('#app')

HTML部分 #

<div id="app">  
  <my-component>Default
  <template #footer>Footer</template>
  </my-component>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script type="text/x-template" id="my-component">
<div>
  <slot></slot>
  <hr/>
  <slot name="footer"></slot>
</div>
</script>

问题原因 #

Vue 3中setup()的执行时机在组件实例初始化阶段，此时插槽还未完成解析，直接打印的slots是一个未触发的插槽函数，表面呈现为空对象。实际上slots是动态函数，需要主动调用才能获取当前插槽内容；或是等到组件挂载完成、插槽渲染完毕后，才能正确访问插槽信息。

解决办法 #

方法1：组件挂载完成后访问slots #

通过onMounted钩子，在组件挂载完成后再读取slots：

const { createApp, onMounted } = Vue;

const myComponent = {
  template: '#my-component',
  setup(props, { slots }) {
    onMounted(() => {
      console.log(slots) // 此时可正确获取default和footer插槽
      console.log(slots.default()) // 调用函数获取默认插槽内容
      console.log(slots.footer()) // 调用函数获取footer插槽内容
    })
  }
}

方法2：直接调用slots()获取当前插槽内容 #

如果需要在setup()执行阶段就获取插槽，可直接调用slots函数：

const { createApp } = Vue;

const myComponent = {
  template: '#my-component',
  setup(props, { slots }) {
    console.log(slots()) // 调用函数获取所有插槽内容
  }
}

内容的提问来源于stack exchange，提问作者Tolbxela