uniapp 刷新子组件的list
时间: 2023-11-27 16:05:30 浏览: 80
如果您想在 uni-app 中刷新子组件的 list,可以使用以下步骤:
1. 在父组件中使用 props 将 list 数据传递给子组件。
2. 在子组件中使用 props 接收 list 数据,并将其存储在子组件的 data 中。
3. 在子组件中使用 watch 监听 list 数据的变化,并在数据变化时更新子组件的 list。
示例代码如下:
父组件:
```html
<template>
<div>
<child :list="list"></child>
<button @click="refreshList">刷新列表</button>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: {
child
},
data () {
return {
list: [/* 初始数据 */]
}
},
methods: {
refreshList () {
// 模拟刷新数据
this.list = [/* 新的数据 */]
}
}
}
</script>
```
子组件:
```html
<template>
<div>
<ul>
<li v-for="item in itemList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
props: ['list'],
data () {
return {
itemList: []
}
},
watch: {
list () {
this.itemList = this.list // 更新子组件的 list
}
}
}
</script>
```
当父组件中的 list 数据发生变化时,子组件的 watch 监听函数会自动触发,更新子组件的 itemList,从而实现了刷新子组件的 list 的效果。
阅读全文
相关推荐


















