vue3 el-select @change (val) 多参数传值操作

在 Vue 3 中，如果你希望在使用 <el-select> 组件（来自 Element Plus 或者 Element UI，取决于你是使用哪个版本的 Vue 3 和 Element）时传递多个参数到 @change 事件处理函数，你可以通过几种方式来实现。

方法 1：使用对象传递

你可以在 @change 事件中返回一个对象，这个对象包含了你想要传递的所有参数。

<template>
  <el-select v-model="selectedValue" @change="handleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script setup>
import { ref } from 'vue';
 
const selectedValue = ref(null);
const options = ref([
  { value: 'option1', label: 'Option 1', extraParam: 'extra1' },
  { value: 'option2', label: 'Option 2', extraParam: 'extra2' }
]);
 
const handleChange = (value) => {
  // 在这里，你可以通过找到 value 对应的对象来获取额外的参数
  const selectedOption = options.value.find(opt => opt.value === value);
  console.log(selectedOption.extraParam); // 输出额外的参数
};
</script>

方法 2：使用自定义事件传递多个参数

如果你想要在事件处理函数中直接传递多个参数，你可以自定义一个事件，并在父组件中监听这个事件。

<template>
  <el-select v-model="selectedValue" @change="handleCustomChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'; // 确保你已经安装了element-plus
 
const selectedValue = ref(null);
const options = ref([
  { value: 'option1', label: 'Option 1', extraParam: 'extra1' },
  { value: 'option2', label: 'Option 2', extraParam: 'extra2' }
]);
 
const emit = defineEmits(['customChange']); // 定义一个自定义事件
 
const handleCustomChange = (value) => {
  const selectedOption = options.value.find(opt => opt.value === value);
  emit('customChange', value, selectedOption.extraParam); // 触发自定义事件并传递参数
};
</script>

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

<template>
  <ChildComponent @customChange="handleCustomChange" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue'; // 确保路径正确
 
const handleCustomChange = (value, extraParam) => {
  console.log(value, extraParam); // 处理传递的参数
};
</script>

方法 3：使用额外的数据属性绑定额外参数到组件外部状态或计算属性中。

这种方法涉及到将额外的参数存储在组件外部的状态或计算属性中，并通过这些状态或计算属性来访问它们。例如，你可以在组件外部维护一个对象，该对象以选项的值为键，以额外的参数为值。然后，在 @change 事件处理函数中，你可以通过这个键来获取额外的参数。这种方法的好处是保持了组件的简洁性，但需要你在外部维护额外的状态。例如：

<template>
  <el-select v-model="selectedValue" @change="handleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus'; // 确保你已经安装了element-plus
 
const selectedValue = ref(null);
const options = ref([{ value: 'option1', label: 'Option 1'