zoukankan      html  css  js  c++  java
  • 按钮组件如何处理点击事件(将原生事件绑定到自定义组件)

    当使用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>

    效果同上

  • 相关阅读:
    iOS-多线程
    iOS-Quartz 2D
    iOS-手势识别
    iOS-触摸事件
    iOS-导航控制器
    iOS-程序的启动过程
    iOS-UIApplication
    iOS-项目常见文件
    iOS-UI控件常见属性总结
    iOS-UIDatePicker、UIPickerView及键盘处理
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15187149.html
Copyright © 2011-2022 走看看