vue循环组件怎么获取值

百变鹏仔 3个月前 (09-25) #VUE

文章标签组件

在 vue 循环组件中获取值的方法：使用索引直接访问。使用 slot 接收值。定义 computed 属性返回所有元素的值。使用 ref 获取组件实例的值。触发自定义事件传递值。

Vue 循环组件中获取值

在 Vue 组件中使用 v-for 循环时，可以访问循环中每个元素的值。以下列出几种方法：

1. 直接使用索引

<template v-for="(item, index) in items"><div>{{ index }}: {{ item }}</div></template>

2. 使用 slot

立即学习“前端免费学习笔记（深入）”；

<template v-for="item in items"><slot name="item">{{ item }}</slot></template>

在父组件中，使用 slot 接收值：

<child v-for="item in items"><template>{{ item }}</template></child>

3. 使用 computed 属性

在组件中定义一个 computed 属性，返回循环中所有元素的值：

export default {  computed: {    allItems() {      return this.items.map(item =&gt; item);    }  }}

4. 使用 ref

将 ref 绑定到循环中每个组件实例，然后可以使用 this.$refs 获取值：

<template v-for="item in items"><child ref="child-{{ index }}"></child></template>

export default {  methods: {    getValueAtIndex(index) {      return this.$refs[`child-${index}`].value;    }  }}

5. 使用自定义事件

在每个循环项组件中，触发一个自定义事件，传递所需的值：

<template v-for="item in items"><child></child></template>

在父组件中，监听自定义事件：

export default {  methods: {    onValueChanged(value) {      // 获取值并处理    }  }}

文章推荐