按钮组件如何处理点击事件（将原生事件绑定到自定义组件）

当使用elementUI的按钮组件时

    <el-button @click="handleClick1">按钮一</el-button>
    <el-button @click="handleClick2">按钮二</el-button>
    <el-button @click="handleClick3">按钮三</el-button>

  methods: {
    handleClick1() {
      alert('按钮一')
    },
    handleClick2() {
      alert('按钮二')
    },
    handleClick3() {
      alert('按钮三')
    }
  }

此时点击按钮就会弹出对应的内容

 

这是怎么实现的，模拟它的按钮自定义一个MyButton组件

<template>
  <button @click="$emit('click')">
    <slot></slot>
  </button>
</template>

App.vue中使用

    <MyButton @click="handleClick1">按钮一</MyButton>
    <MyButton @click="handleClick2">按钮二</MyButton>
    <MyButton @click="handleClick3">按钮三</MyButton>

此时点击就可以触发弹框了，原理是在组件内部通过$emit向父组件派发click事件，当点击按钮时就会触发到父组件中click事件对应的回调函数

 

 

另一种方法，如果MyButton组件中不进行事件派发，vue提供了一个native修饰符，它可以将原生事件绑定到自定义组件上

MyButton.vue

<template>
  <button>
    <slot></slot>
  </button>
</template>

使用时事件后加上native修饰符

    <MyButton @click.native="handleClick1">按钮一</MyButton>
    <MyButton @click.native="handleClick2">按钮二</MyButton>
    <MyButton @click.native="handleClick3">按钮三</MyButton>

效果同上