快捷導(dǎo)航

解決vue3傳屬性時報錯[Vue?warn]:Component?is?missing?template?or?render?function

更新時間：2024年01月17日 10:35:28 作者：一只愛吃糖的小羊

這篇文章主要給大家介紹了關(guān)于解決vue3傳屬性時報錯[Vue?warn]:Component?is?missing?template?or?render?function的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

上網(wǎng)查這個問題，解決方案很多，沒有一款適合我。。。先說我的解決辦法，如果解決不了再往下看，我的原因是用的子組件的ref和子組件的標(biāo)簽名一樣了：

<ChildComponent1
    ref="ChildComponent1"
    :parent-data="data"
  >
    <template #slot-content>
      <div>插槽 content 內(nèi)容000000000</div>
    </template>
    <template #slot-footer>
      <div>插槽 footer 內(nèi)容11111111</div>
    </template>
  </ChildComponent1>

給 ref 改個名字就好了。。。

使用技術(shù)：vue3+ts

用的props傳值，本來都好好的，后來發(fā)現(xiàn)給一個子組件傳值發(fā)生變化的時候，子組件展示有問題并且報警告：[Vue warn]: Component is missing template or render function

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

意思很明顯，好像是我寫了空白的缺少 template和script的組件，但問題是我組件內(nèi)容是完整的啊：

<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>

如果你的問題不是這個，可以看看網(wǎng)上常見的別的解決辦法：

子組件是空白的
子組件引入的時候沒有寫.vue

import ChildComponent1from './ChildComponent1';
// 改為
import ChildComponent1from './ChildComponent1.vue';

總結(jié)

到此這篇關(guān)于解決vue3傳屬性時報錯[Vue warn]:Component is missing template or render function的文章就介紹到這了,更多相關(guān)vue3傳屬性報錯[Vue warn]內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

在vue中使用Echarts畫曲線圖的示例
這篇文章主要介紹了在vue中使用Echarts畫曲線圖的示例，幫助大家在vue中繪制圖表，感興趣的朋友可以了解下
2020-10-10
Vue項目中env文件的作用和配置詳解
Vue項目中,.env文件是運行項目時的環(huán)境配置文件,但是在實際開發(fā)過程中,有本地開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境等,不同環(huán)境對應(yīng)的配置會不一樣,本文給大家介紹了Vue項目中env文件的作用和配置,需要的朋友可以參考下
2024-12-12
vue組件掛載到全局方法的示例代碼
這篇文章主要介紹了vue組件掛載到全局方法的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Vue在 Nuxt.js 中重定向 404 頁面的方法
這篇文章主要介紹了Vue在 Nuxt.js 中重定向 404 頁面的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04
vue+electron實現(xiàn)創(chuàng)建多窗口及窗口間的通信(實施方案)
這篇文章主要介紹了vue+electron實現(xiàn)創(chuàng)建多窗口及窗口間的通信,本文給大家分享實施方案結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-09-09
vue最強table vxe-table 虛擬滾動列表前端導(dǎo)出問題分析
最近遇到個問題,后臺一次性返回2萬條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強table vxe-table 虛擬滾動列表前端導(dǎo)出問題,感興趣的朋友一起看看吧
2023-10-10
vue keep-alive請求數(shù)據(jù)的方法示例
本篇文章主要介紹了vue keep-alive請求數(shù)據(jù)的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
詳解vue3?defineModel如何實現(xiàn)雙向綁定
隨著?Vue?3.3?引入的?defineModel?宏,開發(fā)者可以更加簡潔地實現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定,下面就跟隨小編一起來學(xué)習(xí)一下如何使用defineModel實現(xiàn)雙向綁定吧
2024-12-12
最簡單的vue消息提示全局組件的方法
這篇文章主要介紹了最簡單的vue消息提示全局組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06
uni-app 使用編輯器創(chuàng)建vue3 項目并且運行的操作方法
這篇文章主要介紹了uni-app 使用編輯器創(chuàng)建vue3 項目并且運行的操作方法,目前uniapp 創(chuàng)建的vue3支持 vue3.0 -- 3.2版本也就是說setup語法糖也是支持的，需要的朋友可以參考下
2023-01-01