vue手动触发change

Vue.js 是一个用于构建用户界面的渐进式框架，与其他 JavaScript 库不同，Vue 允许开发者通过声明式的方式来处理 DOM 操作，从而使得代码更加简洁易读，在 Vue 中，我们可以使用 v-on 指令或者简写为 @ 来监听 DOM 事件，如点击、键盘输入等，本文将详细介绍如何在 Vue 中触发 change 事件。

什么是 change 事件？

change 事件是 HTML5 中的一个事件，当用户修改表单元素(如 input、select、textarea)的值时，会触发该事件，与 change 事件类似的还有 input 事件和 select 事件，它们分别对应文本输入框和下拉列表的输入改变，在 Vue 中，我们可以通过自定义 methods 或者使用第三方库(如 Vuelidate)来实现对 change 事件的监听。

如何在 Vue 中监听 change 事件？

1、使用 v-model 双向绑定

Vue.js 通过 v-model 指令实现了数据的双向绑定，即视图中的数据变化时，会自动更新到模型中；反之亦然，当我们在一个表单元素上使用 v-model 时，我们可以轻松地监听到这个元素的 change 事件。

<template>
  <div>
    <input type="text" v-model="message" @change="handleChange">
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleChange() {
      console.log('input value changed:', this.message);
    }
  }
}
</script>

2、在 methods 中定义事件处理函数

除了使用 v-model,我们还可以在 Vue 实例的 methods 中定义事件处理函数，并通过 this.$emit() 或者 this.$on() 分别触发原生的 change 事件，这种方法适用于不使用 v-model 或者需要在多个组件之间共享事件处理函数的情况。

<template>
  <div>
    <input type="text" @change="handleChange">
  </div>
</template>
<script>
export default {
  methods: {
    handleChange() {
      const event = new CustomEvent('change', {});
      this.$el.dispatchEvent(event);
    }
  }
}
</script>

3、在子组件中触发父组件的 change 事件

如果我们需要在子组件中触发父组件的 change 事件，我们可以使用 $emit() 或者 $on()，在父组件中监听子组件触发的事件，然后执行相应的处理逻辑。

父组件：

<template>
  <div>
    <child-component @change="handleChildChange"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default class ParentComponent extends Vue {}
</script>

父组件中的 events: function (event) {}:

methods: {
  handleChildChange(value){console.log(value)};
}