vue父组件异步值传递给子组件
时间: 2023-09-19 14:09:35 浏览: 56
在Vue中,可以通过props来将父组件的异步值传递给子组件。下面是一个简单的示例:
父组件:
```vue
<template>
<div>
<button @click="fetchData">获取数据</button>
<ChildComponent :data="asyncData" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
asyncData: null
}
},
methods: {
fetchData() {
// 模拟异步获取数据
setTimeout(() => {
this.asyncData = '异步数据';
}, 1000);
}
}
}
</script>
```
子组件:
```vue
<template>
<div>
<p>子组件接收到的数据:{{ data }}</p>
</div>
</template>
<script>
export default {
props: ['data']
}
</script>
```
在上述示例中,父组件通过按钮点击触发`fetchData`方法来获取异步数据,并将其赋值给`asyncData`。然后,将`asyncData`作为props传递给子组件`ChildComponent`。子组件通过props接收并显示该数据。
请注意,当异步数据变化时,子组件会自动更新显示。