El-checkbox 绑定的值变化却无触发 Change 事件？

2024-02-01 20:27:21

踩坑事件：El-checkbox 绑定的值变化却无触发 Change 事件？

假设我们有如下代码片段：

<template>
  <el-checkbox v-model="checked"></el-checkbox>
  <button @click="changeValue">修改值</button>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    },
    methods: {
      changeValue() {
        this.checked = !this.checked
      }
    }
  }
</script>

我们希望点击按钮后，checkbox 的值会发生变化，同时触发 change 事件。然而，当我们实际运行代码时，却发现 change 事件并未触发。

原因探究：

要理解为什么 change 事件没有触发，我们需要深入了解 Vue.js 的事件处理机制。在 Vue.js 中，事件处理主要通过 v-on 指令实现。v-on 指令将 HTML 元素与 JavaScript 事件绑定在一起，当事件发生时，相应的 JavaScript 函数就会被触发。

在我们的示例中，v-model 指令被用于处理 checkbox 的值变化。v-model 指令不仅会更新 checkbox 的值，还会触发相应的事件。然而，v-model 指令触发的事件是 input 事件，而不是 change 事件。

因此，当我们点击按钮修改 checkbox 的值时，实际上触发的并不是 change 事件，而是 input 事件。这就是为什么 change 事件没有触发的根本原因。

解决方案：

既然我们已经了解了问题的根源，就可以着手解决这个问题了。有两种方法可以实现我们的目标：

使用 @change 事件监听器

我们可以直接在 checkbox 元素上使用 @change 事件监听器来监听 change 事件。当 change 事件发生时，相应的 JavaScript 函数就会被触发。

<template>
  <el-checkbox v-model="checked" @change="handleChange"></el-checkbox>
  <button @click="changeValue">修改值</button>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    },
    methods: {
      changeValue() {
        this.checked = !this.checked
      },
      handleChange() {
        console.log('Checkbox 的值发生了变化')
      }
    }
  }
</script>

使用 $emit 方法触发自定义事件

我们还可以在 checkbox 组件内部使用 $emit 方法来触发自定义事件。当自定义事件被触发时，父组件就可以监听该事件并做出相应的响应。

<template>
  <el-checkbox v-model="checked" @input="handleInput"></el-checkbox>
  <button @click="changeValue">修改值</button>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    },
    methods: {
      changeValue() {
        this.checked = !this.checked
      },
      handleInput() {
        this.$emit('change', this.checked)
      }
    }
  }
</script>

在父组件中，我们可以使用 v-on 指令来监听自定义事件：

<template>
  <MyCheckbox @change="handleChange"></MyCheckbox>
</template>

<script>
  import MyCheckbox from './MyCheckbox.vue'

  export default {
    components: {
      MyCheckbox
    },
    methods: {
      handleChange(checked) {
        console.log('Checkbox 的值发生了变化', checked)
      }
    }
  }
</script>