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

这篇具有很好参考价值的文章主要介绍了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>

vue3传属性时报错 [Vue warn]: Component is missing template or render function.,vue3,vue.js,javascript,前端
给 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>

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

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

希望本文对您有所帮助!文章来源地址https://www.toymoban.com/news/detail-634397.html

到了这里,关于vue3传属性时报错 [Vue warn]: Component is missing template or render function.的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端开发:Vue3提示警告Failed to resolve component:XXX If this is a native custom element… 的解决方法

    在前端开发中使用Vue的开发者都知道,Vue目前已经以Vue3.0为基础版本了,也就是说Vue3.0已经成为主流版本了。还在只用Vue2.0开发没有使用Vue3.0的开发者要注意了,要抓紧时间熟悉和了解Vue3以上的相关语法和知识点了,迫在眉急。本篇博文来分享一下,关于在使用Vue3的时候遇

    2024年02月11日
    浏览(31)
  • Vue3报错:Failed to resolve component: xx If this is a native custom element, make sure to exclude it f

    Vue3报错:Failed to resolve component: xxx If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 翻译:无法解析组件:xxx 如果这是本机自定义元素,请确保通过compiler Options.is Custom Element将其从组件解析中排除。 网上找了很多博客,都没有解决

    2024年02月12日
    浏览(25)
  • 【VUE】Unterminated template literal:拼接字符串包括<script></script>时报错误

    vue拼接字符串包括script标签时报错误提示Unterminated template literal解决方法加反斜杠就可以,在script结束标签里边加反斜杠 /script

    2024年02月13日
    浏览(28)
  • Vue动态组件 component :is的使用

    vue 动态组件用于实现在指定位置上,动态加载不同的组件,核心代码为: componentTag 为自定义的变量,将需要加载的组件名赋值给它,即可在component /标签出现的位置,渲染该组件。 src/page/component1.vue src/page/component2.vue src/page/component3.vue 点击按钮组件1 点击按钮组件2 点击按

    2024年02月02日
    浏览(30)
  • flutter报错-cmdline-tools component is missing

    安装完androidsdk和android studio后,打开控制台,出现错误 解决办法 找到自己安装android sdk的位置,然后安装上,并将下面的勾选上 再次运行 flutter doctor 不报错,出现以下画面

    2024年02月09日
    浏览(31)
  • flutter cmdline-tools component is missing可能的问题。

    flutter版本 Flutter 3.3.10 andorid studio版本 2021.3.1 Patch 1 打开android studio 工具栏找到tools,找到下面的SDK manager,勾选住下图红框选中的内容,安装即可。 如果你修改过sdk的默认安装目录,如下图 那么你需要修改flutter配置来指定android-sdk目录。 在CMD里输入 然后运行flutter doctor 检查一

    2024年02月11日
    浏览(28)
  • Flutter AndroidStudio 开发环境报错cmdline-tools component is missing

    报错信息如下: [!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) X cmdline-tools component is missing Run path/to/sdkmanager --install \\\"cmdline-tools;latest\\\" See https://developer.android.com/studio/command-line for more details. X Android license status unknown. Run flutter doctor --android-licenses to accept the SD

    2024年02月14日
    浏览(29)
  • runtime-core.esm-bundler.js:40 [Vue warn]: Vue received a Component which was made a reactive object

    ```runtime-core.esm-bundler.js:40 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref .

    2024年02月13日
    浏览(25)
  • Vue安装时报错Failed to download repo vuejs-templates/webpack-simple: connect ETIMEDOUT............

    Vue安装时报错Failed to download repo vuejs-templates/webpack-simple: connect ETIMEDOUT… 情况: vue 命令初始项目文件时,输入vue init webpack project-name 命令时,终端长时间停留在 download template… 字段上,最终出现下面的错误信息 Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT xxxx:443或者

    2024年02月03日
    浏览(33)
  • vue3 使用defineAsyncComponent与component标签实现动态渲染组件

    内容有些啰嗦,内容记载了当时遇到了bug以及解决问题的思路。 业务场景简述: 前端做配置化组件,通过url内的唯一标识,请求后端sql 哪取页面配置信息,前端通过配置信息动态渲染查询表单,导出、表格,toolbar以及动态弹窗;该动态渲染组件的功能,就是渲染的toolbar内

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包