uniapp子向父传对象,父接收后将对象放入页面定义好的数组中,并将其循环显示出来
时间: 2024-03-22 16:41:46 浏览: 70
好的,你可以通过在子组件中使用 `this.$emit` 方法来向父组件传递对象,然后在父组件中通过监听子组件的事件来接收传递过来的对象,将其放入页面定义好的数组中,并使用 `v-for` 指令循环显示出来。
以下是示例代码:
子组件中:
```vue
<template>
<div>
<button @click="sendObject">传递对象给父组件</button>
</div>
</template>
<script>
export default {
methods: {
sendObject() {
const obj = { name: '张三', age: 18 }
this.$emit('receive-object', obj)
}
}
}
</script>
```
父组件中:
```vue
<template>
<div>
<button @click="clearArray">清空数组</button>
<div v-for="item in objectArray" :key="item.name">
<p>{{ item.name }}</p>
<p>{{ item.age }}</p>
</div>
<child-component @receive-object="receiveObject"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
objectArray: []
}
},
methods: {
receiveObject(obj) {
this.objectArray.push(obj)
},
clearArray() {
this.objectArray = []
}
}
}
</script>
```
在上面的代码中,子组件中通过 `this.$emit('receive-object', obj)` 将对象传递给父组件,父组件中监听 `receive-object` 事件,并在 `receiveObject` 方法中将接收到的对象放入 `objectArray` 数组中。然后在页面上使用 `v-for` 指令循环显示出来,以展示接收到的对象。
阅读全文