Vue3 cli-service项目导入带插槽组件时出现"Slot \"default\" invoked outside of the render function"警告

警告触发原因 #

• Vue 3 中插槽本质是返回 VNode 的函数，只有在渲染函数执行过程中调用插槽函数时，才会将插槽内的响应式依赖绑定到正确的渲染上下文，完成依赖追踪。
  你当前的代码在setup顶层预先执行h函数生成了 VNode 数组，再让插槽函数直接返回提前生成好的静态 VNode，相当于插槽内容的生成脱离了插槽调用时的渲染上下文，若插槽内部用到响应式数据，更新时 Vue 无法完成依赖追踪，因此抛出该警告。

解决方法 #

将 VNode 的生成逻辑移到插槽函数内部，保证每次插槽被调用时才动态生成 VNode 即可，修改后的Composite组件代码如下：

// src/components/Composite.js
import { defineComponent, h } from "vue";
import Tabpane from "./Tabpane.vue";

export default defineComponent({
  name: "Composite",
  setup() {
    return () => h(Tabpane, {}, () => [
      h("div", { caption: "I am div 1" }, ["Div 1"]),
      h("div", { caption: "I am div 2" }, ["Div 2"])
    ]);
  }
});

如果插槽内容需要逻辑封装，也可以将 VNode 生成逻辑封装为独立函数，在插槽函数内调用即可，不要在setup顶层预先执行h生成静态 VNode。

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