VUE父组件向子组件传递数据
admin
2023-01-24 19:21:58
0

VUE父组件向子组件传递数据


在使用VUE开发的时候,有时候,我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生,从而导致代码冗余,所以,我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理。

1、父组件通过属性的方式给子组件传值


//注意:":city"和":swiperList"这里定义的什么名字,子组件中props接收的就是什么名字

//     "city"和"swiper"是你data中定义的名字


//js中

//data中定义好参数名,methods中获取数据并赋值给data中的参数   

data(){

    return{

       city:'',

       swiper:[]

    }

},

methods:{

    getHomeInfo (){

        axios.get('/api/index.json')

        .then(this.getHomeInfoSuccess)

    },

    getHomeInfoSuccess(res){

        //这里面的数据获取结构取决于你自己的接口返回来的结构

        res = res.data

        if(res.ret && res.data){

            const data = res.data

            this.city = data.city

            this.swiper = data.swiperList

        }

    }

},

2、子组件使用props接收父组件传递的属性

子组件props中接收的参数只需要给其定义好数据类型即可!

Header子组件中:


    {{ this.city }}

   


//js中

props:{

    city:String

}

Swiper子组件中:

   

       

   

   


//js中

props:{

    swiperList: Array

}



相关内容

热门资讯

时隔一年,英国国防大臣斯特里廷... 一年前,当时还是英国卫生大臣的韦斯·斯特里廷(Wes Streeting)曾公开指责以色列犯下战争罪...
微软与Mistral宣布扩大战... 【CNMO科技消息】7月22日,据韩媒报道,微软与法国AI企业Mistral正式宣布大幅扩大双方战略...
东方空间引力一号(遥四)运载火... 本报讯 (记者袁传玺)北京时间7月22日10时54分,东方空间引力一号(遥四)·星联体号运载火箭在我...
“你的手上沾满鲜血”,美防长出... 当地时间21日,美国国防部长赫格塞思在出席国会参议院听证会时表示,根据最新估算,美国对伊朗战事的花费...
Kimi K3让美国羡慕又不甘... 北京时间7月17日凌晨,月之暗面公司发布开源大模型Kimi K3。据报道,该模型总参数规模达2.8万...
对话高正祺:AI五年内或接管芯... 2021 年,高正祺到 MIT 读博士时,ChatGPT 还没有发布。五年后,他已经可以把一份模拟电...
伊朗军方消息人士:若美袭击伊桥... △伊朗霍尔木兹甘省一座桥梁近日遭美军空袭总台记者当地时间22日获悉,一名伊朗军方消息人士针对美方最新...
外国男子在云南跳伞,半空迟迟不... 近日,有视频显示,一名外国男子背着降落伞从玻璃栈道上跳入峡谷,栈道上有游客拍照鼓掌。男子跳下后,以高...
美国人开始在直播间里“抢”东西... 作者 | 竹芒今年夏天,许多美国消费者的手机屏幕上,出现了这样一幅画面:倒计时十五秒,一件商品的价格...
伊朗连炸20座机库,造成数十名... 伊朗公布重大战果。伊朗WANA通讯社转引伊朗伊斯兰革命卫队第31号声明称,在“胜利2号行动”第21轮...