vue 组件间报这样的错是什么原因导致 的？

Question

我直接贴我的代码：

父组件：

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

子组件

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

        },
        showBar(){

        },
        getMap(){

        }
    }
}
</script>

现在是报这样的错误：

编译后报这样的错：

从提示信息看是我这的这些自定义属性 menuDisplay等未定义，可是我换个写法，

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

也同样是报这样的错误，我不知道该怎么改了。

Answer 1

父组件里为什么没有 template 标签包裹啊？试试这样，

<template>
    <v-header :title="title" :menu-display="menuDisplay" :map-display="mapDisplay" :back-display="backDisplay"></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>

---

如有帮助，麻烦点击下采纳，谢谢~

Answer 2

你在模板里面引用的变量没有在data里面定义