Tengo un componente Tabpane que toma ranuras como entrada. Cuando se importa desde la plantilla, funciona como se esperaba.
<Tabpane> <div caption="I am div 1">Div 1</div> <div caption="I am div 2">Div 2</div> </Tabpane> Sin embargo, cuando se importa desde otro componente ( Composite en el ejemplo), se activa la siguiente advertencia:
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); } });Resuelto.
El problema fue que llamé a slots.default() desde dentro de setup , pero no dentro de la función de renderizado devuelta.
Además, este componente reflejó un enfoque muy principiante de la reactividad. Por ahora sé mejor. La antigua solución problemática todavía está en src/components/Tabpane.vue .
La solución correcta que no activa ninguna advertencia es:
// 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>