解决Vue3 默认槽的非函数值 - Non-function value encountered for default slot 的警告

已于 2023-03-08 09:24:39 修改
阅读量5.3k 收藏 2
点赞数 6
分类专栏： vue3 文章标签： vue3 vue3插槽警告 vue3警告
于 2023-03-07 16:58:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/louting249/article/details/129385745
版权

解决警告⚠️：[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.

h函数的第三个参数加上箭头函数
在这里插入图片描述
在这里插入图片描述

附上官网h函数的讲解
在这里插入图片描述

原因分析：

一般 第三个参数如果不是默认插槽的话 就是当作children传下去，但是一般我们自己用到的ui组件都是用的默认插槽的形式占位，一般原生标签才是当作children传下去的
这里我们把默认插槽当children传下去了，所以才会有这个警告

lt要努力
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue3-clipboard:for Vue 3的剪贴板.js绑定
04-28
vue3剪贴板 Vue 3的绑定。 该存储库是Inndy用于Vue3的插件的端口。 安装 npm install --save @soerenmartius/vue3-clipboard 用法 全局导入v-clipboard指令 src/main.ts import { createApp } from 'vue' import...
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
10-14
3. **v-slot 指令**：自Vue 2.6.0开始，为了增强可读性并减少语法上的混淆，Vue推荐使用`v-slot`指令来替代之前的`slot`和`slot-scope`。在HTML中，我们使用`v-slot`指令与`slot`属性配合，或者在`template`标签中...
Vue3: Non-function value encountered for default slot. Prefer function slots for better performance.
m0_59214979的博客
10-10 1万+
本节：写vue和ts遇到的问题 Non-function value encountered for default slot. Prefer function slots for better performance. 直译就是「默认插槽为非函数值。推荐使用函数插槽以获得更佳性能。」
vue3 函数式组件调试报警 Non-function value encountered for default slot
路过君的博客
01-13 2369
vue3 函数式组件调试报警 Non-function value encountered for default slot
Vue基础知识：插槽——默认插槽，插槽的后备内容，具名插槽，作用域插槽的认识与使用。（slot,#default,row的认识）
我就知道你会来，我们一起进步吧！
06-08 773
1.默认插槽（组件内只能定制一处结构）2.具名插槽（组件内可以定制多次结构）简单而言：就是你希望封装一个组件，这个组件会在多个地方使用，但是每个使用的地方其中的内容部分又是不同的，这个时候你希望自定义，就会运用到插槽。
vue3使用createVNode时警告 Non-function value encountered for default slot. Prefer function slots for be
涂涂
04-22 1049
问题 ：main.ts:88 [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
Non-function value encountered for default slot. Prefer function slots for better performance.
lys20000913的博客
02-17 1万+
控制台报出警告 runtime-core.esm-bundler.js:6620 [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. at <Switch value=1 on-update:value=fn<on-update:value> > ...... 解决方案 默认槽位遇到非函数值。选择功能槽以获得更好的
Non-function value encountered for default slot. Prefer function slots
weixin_44575130的博客
04-26 1375
Non-function value encountered for default slot. Prefer function slots 问题原因： Vue3 使用h函数 推荐使用函数式插槽，以便获得更佳的性能。 解决方式： // 错误 return h(xxx, { xxx }, { xxx}); // 正确 return h(xxx, { xxx }, { default: () => xxx }); // 多个插槽 return h( xxx, { xxx }, { default: ()
Non-function value encountered for slot “role“. Prefer function slots for better performance.
Sea_Fest的博客
06-10 5454
控制台出现警告：Non-function value encountered for slot "role". Prefer function slots for better performance.
【VUE3】Non-function value encountered for default slot. Prefer function slots for better performance.
飘逸者打瞌睡
02-15 332
【代码】【VUE3】Non-function value encountered for default slot. Prefer function slots for better performance.
vue-simple-uploader for vue3源码
04-22
Vue3大文件分片上传是现代Web...总之，`vue-simple-uploader for vue3源码`是实现Vue3应用程序中大文件分片上传的一个重要工具。通过深入研究源码，开发者可以了解其内部工作原理，进而优化和扩展组件以满足特定需求。
vuepress-theme-default-prefers-color-scheme：为vuepress默认主题添加prefers-color-scheme
02-05
Vuepress主题默认偏好颜色方案 该插件为 1.x默认主题增加了对 -color-scheme的支持。 安装 yarn add vuepress-theme-default-prefers-color-scheme # or npm i vuepress-theme-default-prefers-color-scheme 用法 //...
vue2和vue3的v-if与v-for优先级对比学习
01-18
在 vue 3.x 中， v-if 总是优先于 v-for 生效。 对比学习 接下来我们通过一个简单的示例来感知下，假设我们想要实现一个极简的 todoList 效果： 我们有一个 todoList： const todoList = [ { id: 0, task: '...
解决控制台黄色警告: Non-function value encountered for default slot. Prefer function slots
weixin_45743541的博客
09-01 1740
问题原因：Vue3 使用h函数 推荐使用函数式插槽，以便获得更佳的性能。
关于vue中使用h函数报错Non-function value encountered for default slot.
最新发布
jl15988
07-03 422
at <Poptip title=“设置列类型” transfer=true >推荐使用函数形式的插槽。
vue使用h()渲染节点时报警告：
黎小小的博客
03-24 749
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. 使用js方式渲染h()函数节点时，控制台报警告，如下：方法一：将其更改为函数渲染即可方法二：设置默认插槽参考：https://blog.csdn.net/lys20000913/article/details/122984681https://www.ilaoniu.cn/articles/271
Vue3 Compiler 优化细节，如何手写高性能渲染函数
weixin_48726650的博客
06-29 1730
Vue3 的 Compiler 与 runtime 紧密合作，充分利用编译时信息，使得性能得到了极大的提升。本文的目的告诉你 Vue3 的 Compiler 到底做了哪些优化，以及一些你可能希望知道的优化细节，在这个基础上我们试着总结出一套手写优化模式的高性能渲染函数的方法，这些知识也可以用于实现一个 Vue3 的 jsx babel 插件中，让 jsx 也能享受优化模式的运行时收益，这里需要澄清的是，即使在非优化模式下，理论上 Vue3 的 Diff 性能也是要优于 Vue2 的。另外本文不包括 SSR
vue Render中slots的使用
热门推荐
wngzhem的博客
01-11 2万+
render 中 slot 的一般默认使用方式如下： this.$slots.default 对用 template的的使用没有name 。 想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。 this is slot Vue.compone
vue3 el-date-picker :default-value設爲18年前的今天
09-27
Vue3的`el-date-picker`组件中没有`default-value`属性，但是你可以通过设置`value`属性来实现类似的效果。你可以将`value`属性绑定到一个计算属性，该计算属性返回18年前的今天的日期。以下是一个示例代码： ```html <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期"></el-date-picker> ``` ```javascript export default { data() { return { selectedDate: this.calculateDefaultDate(), }; }, methods: { calculateDefaultDate() { const today = new Date(); const defaultDate = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate()); return defaultDate; }, }, }; ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值