MCVE
https://github.com/hyperbotauthor/minvue3cliapp https://github.com/hyperbotauthor/minvue3cliapp
MCVE 直播
https://codesandbox.io/s/white-browser-fl7ji https://codesandbox.io/s/white-browser-fl7ji
我有一个 Vue 3 cli-service 应用程序,它使用带有插槽的组合 API 组件。
The HelloWorld
组件渲染它接收到的槽div
:
// src/components/Helloworld.js
import { defineComponent, h } from "vue";
export default defineComponent({
setup(props, { slots }) {
return () => h("div", {}, slots);
}
});
The Composite
组件用途HelloWorld
in its setup
函数并填充其槽:
// 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", {}, ["Div 2"])]);
}
});
该应用程序使用两种方式来渲染相同的两个 div:
<template>
<!--<img alt="Vue logo" src="./assets/logo.png">-->
Works with plain slots
<HelloWorld>
<div>Div 1</div>
<div>Div 2</div>
</HelloWorld>
Triggers warning when slots are used from other component
<Composite> </Composite>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import Composite from "./components/Composite";
export default {
name: "App",
components: {
HelloWorld,
Composite,
},
};
</script>
<style>
</style>
The Composite
组件触发此警告:
Non-function value encountered for default slot. Prefer function slots for better performance.
当我使用时不会触发相同的警告HelloWorld
仅来自模板。
我不明白如果我使用模板或其他组件中的插槽有什么区别。
这个警告有什么意义呢?
有什么办法可以消除这个警告吗?