What is the cause of such an error in reporting between vue components?

I post my code directly:

parent component:

<v-header :title="title" :menu-display="menuDisplay" :map-display="mapDisplay" :back-display="backDisplay"></v-header>

<script>
import header from "@/components/header"
export default {
  name:"App",
  components:{
    "v-header": header
  },
  data (){
    return {
      
    }
  }
}
</script>

subcomponents

<template>
    <div class="header">
    <div class="header-icon" v-show="backDisplay" @click="goBack"><i class="icon"></i></div>
    <div class="header-cont" :class="{ "pad-l": !backDisplay }">{{title}}</div>
    <div class="header-icon" v-show="menuDisplay" @click="showBar"><i class="icon"></i></div>
    <div class="header-icon" v-show="mapDisplay" @click="getMap"><i class="icon map-icon"></i></div>
  </div>
</template>
<script>
export default {
   data(){
        return {
           
        }
    },
    props:{
        title: String,
        backDisplay: Boolean,
        menuDisplay: Boolean,
        mapDisplay: Boolean
    },
    methods:{
        goBack(){

        },
        showBar(){

        },
        getMap(){

        }
    }
}
</script>

now is the time to report such an error:

from the prompt, these custom attributes such as menuDisplay are not defined, but I"ll put it another way,

props: ["title","menu-display","map-display","back-display"],

also reported such a mistake, I don"t know how to correct it.

</v-header> </template> <script> import header from '@/components/header' export default { name:'App', components:{ 'v-header': header }, data (){ return { 'title':'', 'menu-display': true, 'map-display': true, 'back-display': true } } } </script>