vue 有三个组件互相嵌套，最后一层的子组件怎么与第二层的组件传值？有一个错误一直找不到原因，帮帮忙

Question

这三个组件分别为：
一层 pages/Home
二层 components/travelList
三层 components/travel

Home:

<template>
    <div class="home">
        <travel-list :travelList = "travelListIndex"></travel-list>
    </div>
</template>
<script>
    import travelList from '@/components/travelList'
    export default {
        components:{
            'travel-list':travelList
        },
        data(){
            return {
                travelListIndex: [] //第一层定义使用的变量，但是还是报这个未定义
            }
       },
       created() {
            if (this.travelListIndex.length == 0) {
                this.$store.dispatch("getTravelsList");
            }
        },
        computed:{
            ...mapGetters(["travelListIndex"])
        }
    }
</script>

travelListIndex 在初始化后就一直报错，包括tabbar菜单切换时，也是报这个错：

store->travel.js action有定义getTravelsList() 与 getter也有定义travelListIndex

travelList

<template>
    <div class="travel-list">
        <travel v-for="(item,index) in travelList" :key="index" :travel="item"></travel>
    </div>
</template>
<script>
    import travel from '@/components/travel'
    export default {
        data(){
            return{}
        },
        props: ['travelList'], //第二层子组件给父组件传值
        comments:{
            travel
        }
    }
</script>

travel

<template>
    <div class="travel">
        <router-link :to="{ path: '/travel/'+ travel.objectId }">
        <div class="A-cimg">
            <img :src="travel.travelPic" alt="">
            <span class="i-activity p-free">免费</span>
            <span class="i-activity p-number">{{travel.joinNum}}人报名</span>
            <span class="activity-s activity-s-1">正在报名</span>
        </div>
        <div class="A-info">
            <div>
            <span class="title">{{travel.title}}</span>
            <span class="see"><i class="icon">&#xe62a;</i>{{travel.clicks}}</span>
            </div>
            <div>
            <span class="username">{{travel.releaseUsername}}</span>
            <span class="time">{{travel.releaseTime | formatTime}}</span> 
            </div>
        </div> 
        </router-link>
    </div>
</template>
<script>
export default {
    data(){
        return {}
    },
    props:['travel']//第三层子组件传值，这个位置我感觉有问题，但不知道该怎么传？
}
</script>

Answer 1

data 和 computed 属性重复了，将 vuex 的那个代码mapGetters(["travelListIndex"])，换一个映射的 key 值就好了，比如：

mapGetters({
  _travelListIndex: "travelListIndex",
})

Answer 2

...mapGetters(["travelListIndex"]) 这段本身就定义了 travelListIndex 变量，所以才会出现你截图的异常。Home 组件里的 travelListIndex 换个名字试试看

Answer 3

travelListIndex 重复了 换个名字