vue实现change事件

在 Vue 中实现 change 事件

Vue 中可以通过 v-on 或 @ 语法监听原生 DOM 的 change 事件，适用于表单元素如 <input>、<select>、<textarea> 等。

基本用法

<template>
  <input type="text" @change="handleChange" />
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      console.log('值变化:', event.target.value);
    }
  }
}
</script>

与 v-model 结合使用

v-model 默认监听 input 事件，但可以通过修饰符改为监听 change 事件：

<template>
  <input type="text" v-model.lazy="textValue" />
</template>

<script>
export default {
  data() {
    return {
      textValue: ''
    }
  }
}
</script>

自定义组件中的 change 事件

自定义组件可以通过 $emit 触发 change 事件：

<template>
  <CustomInput @change="onCustomChange" />
</template>

<script>
export default {
  methods: {
    onCustomChange(value) {
      console.log('自定义组件值变化:', value);
    }
  }
}
</script>

自定义组件内部实现

在自定义组件内，可以通过监听原生 change 事件并向上传递：

<template>
  <input type="text" :value="value" @change="$emit('change', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
}
</script>

注意事项

• 原生 change 事件在元素失去焦点时触发，而 input 事件在值每次变化时触发。
• 对于复选框或单选按钮，change 事件更符合预期行为。
• 使用 .lazy 修饰符时，v-model 会从监听 input 改为监听 change 事件。