Vue3: Non-function value encountered for default slot. Prefer function slots...
老牛浏览 6621评论 0发表于
1. 前言
Vue3 在 render() 函数中使用 h() 渲染 vnodes 时出现警告：[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. 之前也遇到过该问题，但一直是一知半解，所以今天重新审视下。
2. 问题说明
要重现上述问题，一个简单的示例如下：
componentA.vue
javascript
<template>
<div class="container">
<slot></slot>
</div>
</template>componentB.vue
javascript
<script>
import { h } from "vue";
import componentA from "./componentA.vue";
export default {
name: "componentB",
components: { componentA },
render() {
return h(componentA, "hello, world");
}
}
</script>渲染组件 B 时即出现警告信息。
3. 解决方法
Non-function value encountered for default slot. Prefer function slots for better performance. 直译就是「默认插槽为非函数值。推荐使用函数插槽以获得更佳性能。」
原因就在于：组件 A 中我们使用了默认插槽，当组件 B 渲染时，为 A 插入了默认值 hello, world。解决方法很简单，插槽返回一个函数即可。
修改后代码：
javascript
<script>
import { h } from "vue";
import componentA from "./componentA.vue";
export default {
name: "componentB",
components: { componentA },
render() {
// return h(componentA, "hello, world");
return h(componentA, () => "hello, world");
// 或者也可以这样，多个插槽时就要这样写
// return h(componentA, null, { default: () => "hello, world" });
}
}
</script>点赞
收藏
暂无评论，快来发表评论吧~
