vue3中 setup 语法 子组件怎么拿到父组件请求到的数据,并保存
时间: 2023-08-28 08:36:39 浏览: 64
在 Vue3 中,子组件可以通过 `props` 接收来自父组件的数据,然后在 `setup` 函数中使用。同时,子组件也可以通过 `emits` 发送事件给父组件,让父组件去请求数据并将数据传递给子组件。
具体的实现步骤如下:
1. 父组件中通过异步请求获取数据,并将数据传递给子组件。例如:
```html
<template>
<child-component :data="parentData" @getData="getParentData"></child-component>
</template>
<script>
import ChildComponent from 'xxx/ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
parentData: {}
}
},
async created() {
this.parentData = await fetchData()
},
methods: {
getParentData() {
return this.parentData
}
}
}
</script>
```
2. 子组件中通过 `props` 接收来自父组件的数据,并在 `setup` 函数中使用。例如:
```html
<template>
<div>{{ data }}</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
props: {
data: {
type: Object,
default: () => ({})
}
},
setup(props, { emit }) {
// 在子组件中发送事件,让父组件去请求数据并将数据传递给子组件
const getData = () => {
emit('getData')
}
return {
getData
}
}
})
</script>
```
3. 父组件中响应子组件发送的事件并将请求到的数据传递给子组件。例如:
```html
<template>
<child-component :data="parentData" @getData="getParentData"></child-component>
</template>
<script>
import ChildComponent from 'xxx/ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
parentData: {}
}
},
async created() {
this.parentData = await fetchData()
},
methods: {
getParentData() {
this.parentData = fetchData()
}
}
}
</script>
```
这样,子组件就可以通过 `props` 接收来自父组件的数据,并在 `setup` 函数中使用,同时也可以通过 `emits` 发送事件给父组件,让父组件去请求数据并将数据传递给子组件。