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>

    效果同上

  • 相关阅读:
    js弹出DIV层
    .net 生成静态页面
    新开博客
    随机生成验证码
    ASP.NET错误处理方法总结
    webgis
    看樱花
    今天转载的笑话,挺好笑呵
    用Tomcat插件在Eclipse上搭建可跟踪调试的J2EE WEB开发环境
    关于JSTL的简单说明
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15187149.html
Copyright © 2011-2022 走看看