Shulou(Shulou.com)06/02 Report--

When using VUE development, sometimes we need to pass data through the parent component like a child component, or in order to prevent each child component from having request data events, resulting in code redundancy, so we can put all child component request events under the same module into the parent component to handle.

1. The parent component passes values to the child components by means of attributes.

/ / Note: whatever names are defined here in ": city" and ": swiperList", that's what the props receives in the subcomponents.

/ / "city" and "swiper" are names defined in your data

/ / in js

/ / define the parameter name in data, get the data in methods and assign it to the parameter in data

Data () {

Return {

City:''

Swiper: []

}

}

Methods: {

GetHomeInfo () {

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

.then (this.getHomeInfoSuccess)

}

GetHomeInfoSuccess (res) {

/ / the data acquisition structure in this depends on the structure returned by your own interface

Res = res.data

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

Const data = res.data

This.city = data.city

This.swiper = data.swiperList

}

}

}

2. The child component uses props to receive the properties passed by the parent component

The parameters received in the sub-component props only need to be defined as data types!

In the header subcomponent:

{{this.city}}



/ / in js

Props: {

City:String

}

In the Swiper subcomponent:

/ / in js

Props: {

SwiperList: Array

}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.