当使用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>
效果同上