uniapp 子组件被父组件循环使用,给父组件传值
时间: 2024-05-08 11:14:00 浏览: 4
在uni-app中,父子组件间的数据传递可以通过props属性来实现。当子组件需要向父组件传值时,可以在子组件中通过$emit方法触发一个自定义事件,父组件可以监听这个事件并在回调函数中获取到子组件传过来的数据。
具体实现步骤如下:
1. 在父组件中使用v-for循环渲染多个子组件,并通过props属性将需要传递的数据传递给子组件。
2. 在子组件中定义一个名为valueChange的自定义事件,并在需要传递数据的地方使用$emit方法触发这个事件,并将需要传递的数据作为参数传入。
3. 在父组件中监听子组件的valueChange事件,并在回调函数中获取到子组件传过来的数据。
代码示例:
父组件:
```
<template>
<div>
<child-component v-for="(item, index) in list" :key="index" :value="item" @valueChange="handleValueChange"></child-component>
</div>
</template>
<script>
import childComponent from '@/components/child-component.vue';
export default {
components: {
childComponent,
},
data() {
return {
list: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
};
},
methods: {
handleValueChange(data) {
console.log(data);
},
},
};
</script>
```
子组件:
```
<template>
<div @click="handleClick">{{ value.name }}-{{ value.age }}</div>
</template>
<script>
export default {
props: {
value: {
type: Object,
default: {},
},
},
methods: {
handleClick() {
this.$emit('valueChange', this.value);
},
},
};
</script>
```