当前位置：首页 > VUE

vue实现change事件

2026-02-17 19:17:59VUE

实现 Vue 的 change 事件

在 Vue 中，可以通过 v-on 或 @ 语法监听 change 事件。change 事件通常在表单元素（如 <input>、<select>、<textarea>）的值发生变化并失去焦点时触发。

vue实现change事件

基本用法

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

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

与 `v-model` 结合使用

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

vue实现change事件

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

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

自定义组件中触发 `change` 事件

在自定义组件中，可以通过 $emit 手动触发 change 事件。

<template>
  <custom-input @change="handleChange" />
</template>

<script>
export default {
  methods: {
    handleChange(value) {
      console.log('Custom input changed:', value);
    }
  }
};
</script>

自定义组件实现

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

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

使用场景示例

监听下拉选择框的变化：

<template>
  <select @change="handleSelectChange">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</template>

<script>
export default {
  methods: {
    handleSelectChange(event) {
      console.log('Selected:', event.target.value);
    }
  }
};
</script>

通过这些方法，可以灵活地在 Vue 中实现 change 事件的监听和触发。