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事件。
