vue axiosget获取数组信息props里怎么写
时间: 2024-02-04 19:04:04 浏览: 64
Vue源码解析之数组变异的实现
如果你想在Vue组件中使用props属性接收一个数组并使用axios进行get请求,可以按照以下步骤进行:
1. 在父组件中使用props将数组传递给子组件。
```html
<template>
<div>
<child-component :myArrayProp="myArray"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data() {
return {
myArray: ['item1', 'item2', 'item3']
}
}
}
</script>
```
2. 在子组件中使用props接收父组件传递的数组并在mounted生命周期方法中使用axios进行get请求。
```html
<template>
<div>
<ul>
<li v-for="item in myArray">{{item}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'ChildComponent',
props: {
myArrayProp: {
type: Array,
required: true
}
},
mounted() {
axios.get('http://example.com/my-api-endpoint')
.then(response => {
// 处理响应数据
})
.catch(error => {
console.log(error);
});
}
}
</script>
```
在子组件中,我们使用props属性接收父组件传递的数组,并在mounted生命周期方法中使用axios进行get请求。你可以根据你的需求修改axios请求的URL和响应数据的处理方式。
阅读全文