解决vue3传属性时报错[Vue warn]:Component is missing template or render function

 更新时间:2024年01月17日 10:35:28   作者:一只爱吃糖的小羊  
这篇文章主要给大家介绍了关于解决vue3传属性时报错[Vue warn]:Component is missing template or render function的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

上网查这个问题,解决方案很多,没有一款适合我。。。先说我的解决办法,如果解决不了再往下看,我的原因是 用的子组件的ref和子组件的标签名一样了:

<ChildComponent1
    ref="ChildComponent1"
    :parent-data="data"
  >
    <template #slot-content>
      <div>插槽 content 内容000000000</div>
    </template>
    <template #slot-footer>
      <div>插槽 footer 内容11111111</div>
    </template>
  </ChildComponent1>

给 ref 改个名字就好了。。。

使用技术:vue3+ts

用的props传值,本来都好好的,后来发现给一个子组件传值发生变化的时候,子组件展示有问题并且报警告:[Vue warn]: Component is missing template or render function

[Vue warn]: Component is missing template or render function

意思很明显,好像是我写了空白的缺少 template和script的组件,但问题是我组件内容是完整的啊:

<template>
  <div class=""> 组件1 </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineEmits, onBeforeMount, onMounted } from 'vue';
  const data: any = reactive({});
</script>

<script lang="ts">
  export default {
    name: 'ChildComponent1',
    data() {
      return {};
    },
  };
</script>

<style lang="less" scoped></style>

如果你的问题不是这个,可以看看网上常见的别的解决办法:

  • 子组件是空白的
  • 子组件引入的时候没有写.vue
import ChildComponent1from './ChildComponent1';
// 改为
import ChildComponent1from './ChildComponent1.vue';

总结 

到此这篇关于解决vue3传属性时报错[Vue warn]:Component is missing template or render function的文章就介绍到这了,更多相关vue3传属性报错[Vue warn]内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue计算属性实现成绩单

    Vue计算属性实现成绩单

    这篇文章主要为大家详细介绍了Vue计算属性实现成绩单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue+element-ui+sortable.js实现表格拖拽功能

    vue+element-ui+sortable.js实现表格拖拽功能

    这篇文章主要为大家详细介绍了vue+element-ui+sortable.js实现表格拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 用Vue写一个分页器的示例代码

    用Vue写一个分页器的示例代码

    本篇文章主要介绍了用Vue写一个分页器的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue3中setup方法的用法详解

    Vue3中setup方法的用法详解

    在vue3版本中,引入了一个新的函数,叫做setup。这篇文章将为大家详细介绍一下Vue3中setup方法的用法,感兴趣小伙伴的可以了解一下
    2022-07-07
  • VUE中的无限循环代码解析

    VUE中的无限循环代码解析

    本文通过实例代码给大家介绍了vue中的无限循环,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • vue element-ui el-table组件自定义合计(summary-method)的坑

    vue element-ui el-table组件自定义合计(summary-method)的坑

    这篇文章主要介绍了vue element-ui el-table组件自定义合计(summary-method)的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    这篇文章主要介绍了vue实现动态给id赋值,点击事件获取当前点击的元素的id操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 解决vue脚手架项目打包后路由视图不显示的问题

    解决vue脚手架项目打包后路由视图不显示的问题

    今天小编就为大家分享一篇解决vue脚手架项目打包后路由视图不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue监听数据的原理详解

    Vue监听数据的原理详解

    本篇文章主要介绍了Vue监测数据的原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看
    2021-10-10
  • vue实现web在线聊天功能

    vue实现web在线聊天功能

    这篇文章主要为大家详细介绍了vue实现web在线聊天功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论