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