小编hyp*_*hor的帖子

MCVE

https://github.com/hyperbotauthor/minvue3cliapp

MCVE 直播

https://codesandbox.io/s/white-browser-fl7ji

我有一个 Vue 3 cli-service 应用程序，它使用带有插槽的组合 API 组件。

该HelloWorld组件渲染它在 a 中接收到的槽div：

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

export default defineComponent({
  setup(props, { slots }) {
    return () => h("div", {}, slots);
  }
});

该组件在其功能中Composite使用并填充其槽：HelloWorldsetup

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

import HelloWorld from "./HelloWorld";

export default defineComponent({
  setup(props, { slots }) {
    return () =>
      h(HelloWorld, {}, [h("div", {}, ["Div 1"]), h("div", …

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. 

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.