vue父组件获取异步数据传递给子组件
时间: 2023-08-29 09:05:28 浏览: 151
vue父组件异步获取数据传给子组件的方法
可以通过以下步骤实现:
1. 在父组件中定义一个异步函数,用于获取数据。
2. 在父组件的created钩子函数中调用异步函数,并将获取到的数据保存到父组件的data中。
3. 在父组件中使用子组件,并将获取到的数据以props的方式传递给子组件。
4. 在子组件中定义props,用于接收父组件传递过来的数据。
下面是示例代码:
父组件:
```
<template>
<div>
<child-component :data="asyncData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
asyncData: []
}
},
created() {
this.getData()
},
methods: {
async getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await response.json()
this.asyncData = data
}
}
}
</script>
```
子组件:
```
<template>
<div>
<ul>
<li v-for="item in data" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
required: true
}
}
}
</script>
```
在上面的示例中,父组件通过fetch获取异步数据,然后将数据保存到asyncData中,并将数据以props的方式传递给子组件。子组件中定义了一个props,用于接收父组件传递过来的数据,并在模板中使用v-for渲染数据。
阅读全文