The VUE parent component passes data to the child component
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
}
