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

}

打开APP阅读更多精彩内容