vue中change事件的使用

在Vue中，@change 并不是一个Vue特有的指令，而是HTML元素（如<input>、<select>等）的一个事件监听属性，它在元素的值发生变化时触发。在Vue的模板中，我们经常使用v-on指令来监听DOM事件，包括change事件。然而，为了简化语法，Vue允许使用@符号作为v-on:的简写。

因此，@change在Vue模板中用于监听元素的change事件。当事件被触发时，Vue会调用一个方法（或内联语句），并将事件对象作为参数传递给它。但是，具体到change事件，除了事件对象（event）之外，不同的HTML元素可能会回传不同的参数或数据。

常见的使用场景

1. <input type="text">、<input type="number">等：这些元素在值变化后，当用户焦点离开元素时（例如，点击其他位置或按下Tab键），会触发change事件。但需要注意的是，change事件本身并不直接回传除了事件对象之外的其他参数。不过，你可以通过event.target.value访问到新的值。

2. <select>：当用户在<select>元素中选择一个新的选项时，会触发change事件。同样，事件对象（event）会被传递，但你可以通过event.target.value来获取用户选择的选项的值。

<template>  
  <div>  
    <!-- 监听输入框的change事件 -->  
    <input type="text" @change="handleChange" />  
  
    <!-- 监听选择框的change事件 -->  
    <select @change="handleChange">  
      <option value="option1">Option 1</option>  
      <option value="option2">Option 2</option>  
    </select>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleChange(event) {  
      // 对于输入框，你可以通过event.target.value获取新的值  
      // 对于选择框，同样可以  
      console.log(event.target.value);  
    }  
  }  
}  
</script>

当然在vue的很多组件库中会有change事件，所回传回来的参数代表的含义可能会不同，我们可以去运用console.log去输出检验了解组件库中的组件回传回来的到底是什么，也可以通过文档查阅回传回来的参数是什么