实现父组件调用子组件方法时报错:[Vue warn]: Invalid vnode type when creating vnode: null.
使用uniapp实现父组件调用子组件方法时报错:[Vue warn]: Invalid vnode type when creating vnode: null.
实现代码如下:
子组件:
<template><view><view class="toolsHeader"><view class="toolsTitle">{{toolsName}}</view><uni-icons :type="collectType" @click="collection"></uni-icons></view></view>
</template><script setup>
import { ref,defineEmits,defineExpose } from 'vue';const emit = defineEmits(['collect','refresh'])
const collectType = ref('star');const props = defineProps({toolsName:{type: String,default: ''}
});const changeStatus = (tar, status)=>{if(tar == 'collect'){collectType.value = status == 1 ? 'star-filled' : 'star';}
}defineExpose({changeStatus
})const collection = ()=>{let toStatus = collectType.value == 'star' ? 1 : 0;emit("collect", toStatus);
}</script><style lang="scss" scoped>
</style>
父组件:
<template><view><tools-header ref="toolsHeader" toolsName="name" @collect="collectools"></tools-header></view>
</template><script setup>
import { ref } from 'vue';const toolsHeader = ref({});const collectools = (status)=>{toolsHeader.value.changeStatus('collect', status);
}
</script><style lang="scss" scoped></style>
运行项目就报如上报警:[Vue warn]: Invalid vnode type when creating vnode: null.
经过一番查询和尝试,发现是ref和组件名冲突了,虽然这里ref使用的是驼峰格式,组件名是-分隔,但底层应该是将tools-header转换成了toolsHeader,导致了名称冲突。修改下ref名称即可:
<template><view><tools-header ref="toolsHeaderChild" toolsName="name" @collect="collectools"></tools-header></view>
</template><script setup>
import { ref } from 'vue';const toolsHeaderChild= ref({});const collectools = (status)=>{toolsHeaderChild.value.changeStatus('collect', status);
}
</script><style lang="scss" scoped></style>
再次运行,结果正常。
参考文章:
https://www.cnblogs.com/lpkshuai/p/17176606.html
nuxt3 Vue 3 报错 Invalid vnode type when creating vnode:null_invalid vnode type when creating vnode: null.-CSDN博客
相关文章:
实现父组件调用子组件方法时报错:[Vue warn]: Invalid vnode type when creating vnode: null.
使用uniapp实现父组件调用子组件方法时报错:[Vue warn]: Invalid vnode type when creating vnode: null. 实现代码如下: 子组件: <template><view><view class"toolsHeader"><view class"toolsTitl…...
Java面试八股之什么是消息队列
什么是消息队列 消息队列(Message Queue)是一种应用程序间通信(IPC)的形式,它允许进程将消息发送到另一个消息队列,接收端则可以在任何时刻从队列中取出这些消息进行处理。消息队列提供了一种异步处理、解…...
【kubernetes】k8s配置资源管理
一、ConfigMap资源配置 ConfigMap保存的是不需要加密配置的信息 ConfigMap 功能在 Kubernetes1.2 版本中引入,许多应用程序会从配置文件、命令行参数或环境变量中读取配置信息。ConfigMap API 给我们提供了向容器中注入配置信息的机制,ConfigMap 可以被…...
高分六号卫星助力农业监测_卫星介绍_论文分享_数据获取
卫星遥感已经成为农业发展的重要支持工具。《“数据要素X”三年行动计划(2024-2026年)》指出,在现代农业交通运输、应急管理等领域鼓励探索利用遥感数据。为什么高分六号会经常应用于农业检测呢?本文将介绍高分六号卫星的农业检测特性、在农业应用中的优势、具体农业…...
【Linux网络】TCP协议
欢迎来到 破晓的历程的 博客 ⛺️不负时光,不负己✈️ 文章目录 引言1、TCP协议的特点2、确认应答机制3、超时重传机制4、TCP报头结构5、三次握手建立连接6、四次挥手断开连接总结 引言 TCP协议是传输层中非常重要的协议。本篇博客我们将从TCP头部信息、TCP状态转…...
Linux 基本指令讲解 上
linux 基本指令 clear 清屏 Alt Enter 全屏/退出全屏 pwd 显示当前用户所处路径 cd 改变目录 cd /root/mikecd … 返回上级目录cd - 返回最近所处的路径cd ~ 直接返回当前用户自己的家目 roor 中:/root普通用户中:/home/mike mkdir 创建一个文件夹(d) …...
深入了解指针(6)
文章目录 1.函数指针数组2.转移表3.回调函数 1.函数指针数组 存放函数指针的数组 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> int add(int x, int y) {return x y; } int sub(int x, int y) {return x - y; }int main() {int (*p1)(int x, int y) add;int (…...
【Linux系列】known_hosts详解
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
MySQL4 多表查询 内连接
内连接 多表查询内连接 多表查询 数据准备 CREATE DATABASE db4; USE db4; -- 创建部门表 create table if not exists dept(deptno varchar(20) primary key , -- 部门号name varchar(20) -- 部门名字 );-- 创建员工表 create table if not exists emp(eid varchar(20) pr…...
力扣45:跳跃游戏2题解
题目链接: https://leetcode.cn/problems/jump-game-ii/description/?envTypestudy-plan-v2&envIdtop-100-liked 参考的代码随想录里面的题解: 题目 难度 中等,标的是中等难度,而且我之前做过这道题,但是我没写…...
产品经理-产品被同行抄袭如何处理(32)
在面试当中,如果被问到,产品被同行抄袭如何处理 竞争分析、战略决策。 1)对行业相关事件的关注度:如之前对腾讯抄袭事件的讨论,如果能结合“被抄袭”后的失败案例(例如联众)和反抄袭的成功案例(例如豆瓣&am…...
LDR6020在Type-C手机同时充电与USB2.0数据传输方案
随着科技的飞速发展,Type-C接口已成为智能手机等移动设备的主流充电和数据传输接口。为了满足用户对于高效充电与稳定数据传输的双重需求,乐得瑞科技推出的LDR6020芯片凭借其卓越的性能和丰富的功能,为Type-C手机提供了同时充电与USB2.0数据传…...
Python学习笔记(七)
""" 演示数据容器字典的定义 """# # 定义字典{key:value,key2:value2} 注意key不能是字典,value可以任意 # my_dict1 {"王力鸿": 99, "周杰轮": 88, "林俊节": 77}# #定义空字典 # my_dict2 {} # my…...
mysql中log
目录 MySQL 日志系统概述 日志类型 日志的作用和重要性 Mermaid图示 1. Undo Log 和 Redo Log 的协同工作图 2. Redo Log 确保持久性的流程图 Undo Log(回滚日志) 事务的原子性(Atomicity)保障 事务回滚机制 MVCC&#…...
iOS Object-C 创建类别(Category) 与使用
有时候使用系统给出类或者第三方的类,但是呢它们自带的属性和方法又太少,不够我们的业务使用,这时候就需要给“系统的类或者第三方类”创建一个类别(Category),把自己的想添加的属性和方法写进来. Category模式用于向已经存在的类添加方法从而达到扩展已有类的目的 一:创建Ca…...
Rocky系统部署k8s1.28.2单节点集群(Containerd)+Kuboard
目录 Kubernetes介绍 Kubernetes具备的功能 Kubernetes集群角色 Master管理节点组件 Node工作节点组件 非必须的集群插件 Kubernetes集群类型 Kubernetes集群规划 集群前期环境准备 开启Bridge网桥过滤 关闭SWAP交换分区 安装Containerd软件包 K8s集群部署方式 集…...
Springboot整合Flowable入门-学习笔记
目录 1、定义流程(画图) 2、Springboot部署流程 3、Springboot删除所有流程 4、Springboot根据 流程部署ID 查询 流程定义ID 5、Springboot启动(发起)流程 6、Springboot查询任务 6.1全部任务 6.2我的任务(代办任务) 7、…...
C语言常见的题目
1、 从源码到可执行文件会经历怎样的过程? 预编译:去掉空格、注释,处理预定义的指令,生成处理后的源代码文件。 编译:翻译成汇编代码,生成汇编文件。 汇编:翻译成机器码,生成一个或…...
Android13适配记录
多语言支持,此功能在国内被阉割 配置后在设置内可以选择 <?xml version"1.0" encoding"utf-8"?> <locale-config xmlns:android"http://schemas.android.com/apk/res/android"><locale android:name"zh" …...
Android TV上OTT PWA应用开发的播放器选择:video.js vs exoplayer
跨平台 OTT PWA 应用开发,最方便的当然是选用 video.js 库。但是既然是安卓平台,exoplayer 看起来总是最稳妥的选择 介绍 Exoplayer 是 Android media3 的一个实现,以前是独立出来的,现在已经合并到 androidx.media3 中了。 Vid…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题: 指定音频引擎与设备;播放音频文件 本文所使用的环境: Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
