Vue 3 cli-service 应用程序：当从其他组件导入带有插槽的组件时，“插槽“默认”在渲染函数之外调用”警告答案

【问题标题】：Vue 3 cli-service app: "Slot "default" invoked outside of the render function" warning when component with slots is imported from other componentVue 3 cli-service 应用程序：当从其他组件导入带有插槽的组件时，“插槽“默认”在渲染函数之外调用”警告
【发布时间】：2021-12-23 22:26:16
【问题描述】：

MCVE

我有一个将插槽作为输入的Tabpane 组件。从模板导入时，它按预期工作。

<Tabpane>
    <div caption="I am div 1">Div 1</div>
    <div caption="I am div 2">Div 2</div>
</Tabpane>

但是，当从其他组件（示例中为 Composite）导入时，会触发以下警告：

Slot "default" invoked outside of the render function:
this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

// src/components/Composite.js

import { defineComponent, h } from "vue";

import Tabpane from "./Tabpane.vue";

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

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api slots

【解决方案1】：

解决了。

问题是我在setup 中调用了slots.default()，而不是在返回的渲染函数中。

这个组件也反映了一种非常初级的反应性方法。到现在我知道得更清楚了。 src/components/Tabpane.vue 中仍然存在旧的问题解决方案。

不触发警告的正确解决方案是：

// src/components/Tabpane2.vue

<script>
import { defineComponent, h, reactive } from "vue";

export default defineComponent({
  name: "Tabpane2",
  props: {
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  setup(props, { slots }) {
    const react = reactive({
      selectedTab: 0,
    });
    return () =>
      h("div", { class: ["vertcont"] }, [
        h(
          "div",
          {
            class: ["tabs"],
          },
          slots.default().map((tab, i) =>
            h(
              "div",
              {
                class: {
                  tab: true,
                  selected: i === react.selectedTab,
                },
                onClick: () => {
                  react.selectedTab = i;
                },
              },
              [tab.props.caption]
            )
          )
        ),
        h(
          "div",
          {
            class: ["slotscont"],
            style: {
              width: `${props.width}px`,
              height: `${props.height}px`,
            },
          },
          slots.default().map((slot, i) =>
            h(
              "div",
              {
                class: {
                  slot: true,
                  active: react.selectedTab === i,
                },
              },
              [slot]
            )
          )
        ),
      ]);
  },
});
</script>

<style>
.tab.selected {
  background-color: #efe;
  border: solid 2px #afa !important;
  border-bottom: transparent !important;
}
.tab {
  background-color: #eee;
}
.tabs .tab {
  padding: 5px;
  margin: 2px;
  border: solid 2px #aaa;
  border-radius: 8px;
  border-bottom: transparent;
  cursor: pointer;
  user-select: none;
  transition: all 0.5s;
  color: #007;
}
.tabs {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.vertcont {
  display: flex;
  flex-direction: column;
  margin: 3px;
}
.slotscont {
  position: relative;
  overflow: scroll;
  padding: 5px;
  border: solid 1px #777;
}
.slot {
  visibility: hidden;
  position: absolute;
}
.slot.active {
  visibility: visible;
}
</style>

【讨论】：