美文网首页
父子组件之间的传值

父子组件之间的传值

作者: edisonTechBlog | 来源:发表于2020-02-27 11:05 被阅读0次

    解决了axios第一座大山,就来到了第二座,可预见的是第三座应该是vuex。废话不多说,直奔主题。

    首先,假设一个场景。有一个mooc数据文件,然后有一个父组件,父组件有若干个子组件,每一个子组件都需要到mooc提取数据。问题来了,如果让每一个子组件去获取,假设有10个子组件,那么就需要发送10个axios请求,这对性能是不好的。所以现在只让父组件去获取,这样就可以只发一个请求。问题又来了,父组件如何传值给子组件呢?

    现在有五个子组件,那么父组件就需要在data()里面写五个,分别传值给他们。先不管父组件如何去拿到这些值并且分配给他们。现在只需要关心传值的通道。代码如下,格式为: :variate="variate"

            <home-header :city="city"></home-header>
            <home-swiper :swiperList="swiperList"></home-swiper>
            <home-icons :iconsList="iconsList"></home-icons>
            <home-recommend :recommendList="recommendList"></home-recommend>
            <home-weekend :weekendList="weekendList"></home-weekend>
    

    问题来了,variate从哪儿来?

    data(){
            //要格外注意这里的类型,不能填错
            return {
                city:"",
                swiperList:[],
                iconsList:[],
                recommendList:[],
                weekendList:[],
            }
        }
    

    为什么要这样写,首先这个父组件是相对的,所以data也需要return。 还有一个关键的地方,就是在写variate的时候,要根据mooc数据的类型来写。但是不能写array、string等

    说完了传值通道的建立,在来说说子组件是如何使用的。以header为例子,使用props属性从父组件获取city,并且还需要声明类型,并且要写String、Array等,开头要大写

    export default {
        name:"HomeHeader",
        props:{
            city:String
        }
    }
    

    最后来说说父组件如何获取的值呢?话不多说,到此为止

                // 将mooc数据里的data赋值给res
                res=res.data
                //然后判断一下,获取的res是否正确,因为ret为true
                if(res.ret){
                    const data=res.data
                    this.city=data.city
                    this.swiperList=data.swiperList
                    this.iconsList=data.iconsList
                    this.recommendList=data.recommendList
                    this.weekendList=data.weekendList
                }
    

    相关文章

      网友评论

          本文标题:父子组件之间的传值

          本文链接:https://www.haomeiwen.com/subject/yshthhtx.html