Why can't the two sub-components of VUE be displayed?

The

page shows nothing if you don"t write < Artical/ > and < Write/ > can show msg . Why?
the terminal window did not report an error. The browser console reported this error


Blog.vue .

<template>
 <div>
     {{msg}}
    <Artical/> 
    <Write/>
 </div>
</template>

<script>
import Write from "@/components/Write"
import Artical from "@/components/Artical"

export default {
  name: "Artical",
  data () {
    return {
      msg: "test"
    }
  },
  components: {
    Artical,
    Write
  }
}
</script>

<style scoped>
</style>

Artical.vue

<template>
 <div>
   <div class="content">
       Artical
   </div>
 </div>
</template>

<script>
export default {
  name: "Artical",
  data () {
    return {
    }
  }
}
</script>

<style scoped>
</style>

Write.vue

<template>
 <div>
   <div class="content">
       Write
   </div>
 </div>
</template>

<script>
export default {
  name: "Write",
  data () {
    return {
    }
  }
}
</script>

<style scoped>
</style>
Apr.11,2021

The name of

Blog is also Artical , causing this component to be used recursively when using < Artical/ > .

name plays a role in distinguishing different components. Vue natively allows recursive calls, but it is obvious that using it this way will burst the stack. see

.
Menu