element-ui的回调函数Events的用法详解

下面是element-ui的回调函数Events的用法详解。

什么是Events？

Events是element-ui中处理组件事件的一种机制，是一个Vue中的事件对象。和原生的事件对象相比，Events在提供原生事件对象的基础上，提供了一些额外的方法和属性。Events被广泛应用在element-ui组件中，例如Button、Input、Select、DatePicker等组件。通过监听Events，我们可以对组件的状态进行控制，实现一些功能。

如何使用Events？

使用Events要分两种情况：

• 对于已经封装好的组件，我们只需要监听相应的事件即可。
• 对于尚未封装好的自定义组件，我们需要手动进行事件的绑定。

下面分别来看看这两种情况。

已经封装好的组件

以Button组件为例子，Button提供了四个常见的事件：click、focus、blur和keydown。我们只需要在Button组件上使用@事件名称来监听相应的事件即可。

<el-button @click="handleClick">Click me</el-button>

在事件处理程序中，第一个参数就是被触发事件的事件对象，我们可以从中获取一些有用的信息。如下面的handleClick事件处理程序中获取了event.target和event.type两个属性。

methods: {
  handleClick(event) {
    console.log(event.target); // 获取事件的目标元素
    console.log(event.type); // 获取事件的类型
  }
}

对于这些已经封装好的组件，我们可以查看element-ui的官方文档来了解各个组件支持的事件。

尚未封装好的组件

对于尚未封装的自定义组件，我们需要手动进行事件的绑定。下面用一个简单的自定义组件来说明。

<template>
  <div>
    <input type="text" @input="handleChange">
    <span>{{value}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleChange(event) {
      this.value = event.target.value;
      this.$emit('input', this.value);
    }
  }
}
</script>

这是一个简单的双向绑定组件，包含一个输入框和一个显示输入值的span。在输入框中，我们监听了input事件，触发了handleChange事件处理程序，在事件处理程序中，我们获取到了输入框的值，同时通过$emit方法触发了一个名为input的自定义事件，并且把输入框的值作为参数传递。这样，在使用这个自定义组件时，我们就可以通过v-model来实现数据的双向绑定了。

<custom-input v-model="name"></custom-input>

其中name是在父组件中定义的一个data选项。

data() {
  return {
    name: ''
  }
}

当我们在自定义组件中进行了数据修改时，父组件中的name数据也会随之改变。

示例说明

示例1：我们在el-button组件上添加一个回调函数

<template>
  <el-button @click="handleClick">点击</el-button>
</template>
<script>
export default {
  methods: {
    handleClick(event) {
      alert('Hello World!!');
    }
  }
}
</script>

在这个示例中，我们为el-button组件添加了一个click事件的回调函数，当按钮被点击时，会弹出一个"Hello World!!"的提示框。

示例2：我们在el-input组件上添加一个回调函数

<template>
  <el-input v-model="inputValue" @blur="handleBlur">请输入</el-input>
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleBlur(event) {
      const value = event.target.value;
      if(value.length > 10){
        alert('请不要超过10个字符！');
      }
    }
  }
}
</script>

在这个示例中，我们为el-input组件添加了一个blur事件的回调函数，当输入框失去焦点时，会根据输入框的值检查字符长度是否超过10个字符。如果超过则会弹出一个提示框。