当前位置: 首页 > news >正文

实现父组件调用子组件方法时报错:[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博客

http://www.lryc.cn/news/424016.html

相关文章:

  • Java面试八股之什么是消息队列
  • 【kubernetes】k8s配置资源管理
  • 高分六号卫星助力农业监测_卫星介绍_论文分享_数据获取
  • 【Linux网络】TCP协议
  • Linux 基本指令讲解 上
  • 深入了解指针(6)
  • 【Linux系列】known_hosts详解
  • MySQL4 多表查询 内连接
  • 力扣45:跳跃游戏2题解
  • 产品经理-产品被同行抄袭如何处理(32)
  • LDR6020在Type-C手机同时充电与USB2.0数据传输方案
  • Python学习笔记(七)
  • mysql中log
  • iOS Object-C 创建类别(Category) 与使用
  • Rocky系统部署k8s1.28.2单节点集群(Containerd)+Kuboard
  • Springboot整合Flowable入门-学习笔记
  • C语言常见的题目
  • Android13适配记录
  • Android TV上OTT PWA应用开发的播放器选择:video.js vs exoplayer
  • 24.8.14 《CLR via C#》 笔记12
  • P2801 教主的魔法
  • Go 语言channel的应用场景及使用技巧
  • QLabel设置图像的方法+绘制文本换行显示
  • LVS原理及相关配置
  • webrtc一对一视频通话功能实现
  • 通道(channel)传递数据的例子写一个
  • Vue3+Echarts+饼图环形图
  • Python while编程题目|AI悦创Python一对一教学辅导
  • C语言 | Leetcode C语言题解之第324题摆动排序II
  • Docker③_VMware虚拟机和Docker的备份与恢复