回答uniapp父组件调用子组件,子组件会重复渲染调用api吗?
时间: 2023-11-25 11:05:16 浏览: 109
解决父组件将子组件作为弹窗调用只执行一次created的问题
在uniapp中,父组件调用子组件时,子组件会被渲染多次,但并不会重复调用API。这是因为在Vue中,组件的渲染是基于虚拟DOM的,当父组件数据发生变化时,会重新渲染子组件,但并不会重新调用API。如果你担心API被重复调用,可以在子组件中使用`watch`监听父组件传递的数据,当数据发生变化时再调用API。
以下是一个简单的示例代码:
父组件:
```vue
<template>
<div>
<child :list="list"></child>
<button @click="changeList">改变列表</button>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
components: {
Child
},
data() {
return {
list: [1, 2, 3]
}
},
methods: {
changeList() {
this.list.push(4)
}
}
}
</script>
```
子组件:
```vue
<template>
<div>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
}
},
watch: {
list() {
this.fetchData()
}
},
methods: {
fetchData() {
// 调用API获取数据
}
}
}
</script>
```
阅读全文