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

I checked this problem online, there are many solutions, but none of them suit me. . . Let me talk about my solution first. If you can’t solve it, then look down. My reason is that the ref of the subcomponent used is the same as the label name of the subcomponent:

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

Just rename the ref . . .

Technology used:vue3+ts

The props used to pass the value were all good at first, but later found that when the value passed to a sub-component changed, the sub-component displayed a problem and reported a warning: [Vue warn]: Component is missing template or render function

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

The meaning is obvious, it seems that I wrote a blank component that lacks template and script, but the problem is that the content of my component is complete:

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

If your problem is not this, you can look at other common solutions on the Internet:

1. child component is blank
2. No .vue was written when the subcomponent was introduced

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

Hope this article helps you!