vue3onMounted中获取到的数据怎么在外面使用
时间: 2024-01-22 21:19:02 浏览: 42
在Vue3中,可以使用`ref`来定义响应式对象,然后在`onMounted`钩子函数中获取数据并赋值给`ref`对象。这样,在外部就可以通过访问`ref`对象来获取到最新的数据。
例如,假设我们在`onMounted`钩子函数中获取了一个列表数据,并将其赋值给`ref`对象`list`:
```
import { onMounted, ref } from 'vue'
export default {
setup() {
const list = ref([]);
onMounted(() => {
// 通过异步请求获取数据
fetch('https://api.example.com/list')
.then(response => response.json())
.then(data => {
// 将获取到的数据赋值给 list
list.value = data;
});
});
return {
list
};
}
}
```
然后在外部的模板中,就可以通过`list`来访问最新的列表数据:
```
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import MyComponent from './MyComponent.vue';
export default defineComponent({
components: {
MyComponent
},
setup() {
return {
// 通过 MyComponent 组件的 props 传递 list 数据
list: MyComponent.list
};
}
});
</script>
```