面试题：Vue事件委托中如何传递不同参数并正确处理

Question

在Vue的事件委托场景下，列表项除了点击事件外，还需要传递不同的参数（例如列表项的索引值、特定的属性值等）给事件处理函数。请说明实现思路，并给出完整的Vue组件代码，包括模板、数据和方法部分，以展示如何正确传递和处理这些参数。

Answer 1

实现思路

1. 在模板中使用v-on:click指令绑定点击事件，并通过括号传递需要的参数，如列表项的索引值或特定属性值。
2. 在Vue组件的methods中定义事件处理函数，该函数接收传递过来的参数进行相应处理。

完整Vue组件代码

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="handleClick(index, item.specificProperty)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: '列表项1', specificProperty: '属性值1' },
        { text: '列表项2', specificProperty: '属性值2' },
        { text: '列表项3', specificProperty: '属性值3' }
      ]
    };
  },
  methods: {
    handleClick(index, property) {
      console.log(`点击了第 ${index + 1} 项，特定属性值为: ${property}`);
    }
  }
};
</script>