解決vue3傳屬性時(shí)報(bào)錯(cuò)[Vue?warn]:Component?is?missing?template?or?render?function

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

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

上網(wǎng)查這個(gè)問(wèn)題，解決方案很多，沒(méi)有一款適合我。。。先說(shuō)我的解決辦法，如果解決不了再往下看，我的原因是用的子組件的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 改個(gè)名字就好了。。。

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

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

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

意思很明顯，好像是我寫(xiě)了空白的缺少 template和script的組件，但問(wèn)題是我組件內(nèi)容是完整的?。?/p>

<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èn)題不是這個(gè)，可以看看網(wǎng)上常見(jiàn)的別的解決辦法：

子組件是空白的
子組件引入的時(shí)候沒(méi)有寫(xiě).vue

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue請(qǐng)求按順序執(zhí)行的示例詳解
我們有時(shí)候會(huì)碰到這種情況，需要連續(xù)發(fā)送兩個(gè)請(qǐng)求，第二個(gè)請(qǐng)求需要用第一個(gè)請(qǐng)求的某個(gè)返回值作為參數(shù)來(lái)作為第二個(gè)請(qǐng)求的請(qǐng)求參數(shù)，這篇文章主要介紹了vue請(qǐng)求如何按順序執(zhí)行,需要的朋友可以參考下
2023-12-12
vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
Vue微信小程序和uniapp配置環(huán)境地址
在微信小程序中，可以使用全局配置和使用開(kāi)發(fā)、體驗(yàn)、生產(chǎn)環(huán)境的地址，這篇文章主要介紹了Vue微信和uniapp配置環(huán)境地址,需要的朋友可以參考下
2023-07-07
關(guān)于找到任意組件實(shí)例的方法
這篇文章主要介紹了關(guān)于找到任意組件實(shí)例的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的函數(shù) Object.defineProperty，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
使用element-ui實(shí)現(xiàn)行合并過(guò)程
這篇文章主要介紹了使用element-ui實(shí)現(xiàn)行合并過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Element InputNumber 計(jì)數(shù)器的實(shí)現(xiàn)示例
這篇文章主要介紹了Element InputNumber 計(jì)數(shù)器的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vite+vue3中require?is?not?defined問(wèn)題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue2.X組件學(xué)習(xí)心得(新手必看篇)
下面小編就為大家?guī)?lái)一篇vue2.X組件學(xué)習(xí)心得(新手必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07