• 按钮组件如何处理点击事件(将原生事件绑定到自定义组件)


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

    效果同上

  • 相关阅读:
    ServiceModel 元数据实用工具 (Svcutil.exe)
    SvsUtil.exe生成服务文件
    WCF经典代码
    Redis以服务的形式启动
    WinForm下的Nhibernate+Spring.Net的框架配置文件
    Bootstrap 简介二
    Bootstrap 简介
    CodeMatic动软自动生成Nhibernate
    redis.conf配置项说明
    一.RocketMQ消息中间件 windwos使用
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15187149.html
Copyright © 2020-2023  润新知