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

这三个组件分别为:
一层 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菜单切换时,也是报这个错:

clipboard.png

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"></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>

回答:

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

mapGetters({
  _travelListIndex: "travelListIndex",
})

回答:

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

回答:

travelListIndex 重复了 换个名字

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注