Vue自定义的组件@click失效

ゝ一世哀愁。 2022-10-08 00:56 205阅读 0赞

### Vue自定义的组件@click失效 ###

*  错误示例
 *  描述
 *  正确示例
 *  解释

# 错误示例 #

<template>
      <div>
        <Buttom text="确定" @click="handler()"></Buttom>
        <input type="button" @click="handler()" value="确定" />
      </div>
    </template>
    
    import {  Component, Prop, Vue } from "vue-property-decorator";
    import Buttom from "@/components/buttom/Buttom.vue";//自定义组件
    @Component({  name: "", components: {  Buttom } })
    export default class index extends Vue { 
      handler() { 
        alert("提示");
      }
    }

# 描述 #

\*\* 调用自定义组件上绑定的@click=“handler()” 事件不成功\*\*

# 正确示例 #

<template>
      <div>
        <Buttom text="确定" @click.native="handler()"></Buttom>
        <input type="button" @click="handler()" value="确定" />
      </div>
    </template>
    
    import {  Component, Prop, Vue } from "vue-property-decorator";
    import Buttom from "@/components/buttom/Buttom.vue";//自定义组件
    @Component({  name: "", components: {  Buttom } })
    export default class index extends Vue { 
      handler() { 
        alert("提示");
      }
    }

# 解释 #

**如果你想在某个组件的根元素上绑定事件，直接使用 @click="handler()"是没法调用到原生onclick事件，所以vue提供了native 修饰符，通过native可以直接监听组件根元素的原生事件，我们可以添加native修饰符来实现click事件例如： @click.native=“handler()”，**

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue之自定义组件

引言在开发领域，我们经常会碰到列表这一类的业务，比如新闻列表，商品列表、活动列表等等。为了不重复造轮子，机智的我们总想把功能模块块，抽象出一个个的小组件，之后开发...

爱被打了一巴掌/ 2024年04月18日 14:43/ 0 赞/ 63 阅读

相关 Vue自定义的组件上@click点击事件【失效】问题

码如下： /*写的right_fixed组件*/ Vue.component('right_fixed',{ props:['...

迷南。/ 2024年04月17日 05:22/ 0 赞/ 62 阅读

相关 Vue自定义的组件@click失效

Vue自定义的组件@click失效错误示例描述正确示例解释错误示例 <template> <div>

ゝ一世哀愁。/ 2022年10月08日 00:56/ 0 赞/ 206 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 279 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 270 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 290 阅读

相关自定义vue日历组件

今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。先给大家看一下组件的效果图，如下所示： ![640_wx_fm

短命女/ 2022年05月27日 03:30/ 0 赞/ 505 阅读

相关 Vue的自定义组件不能使用click方法

先贴代码 var myButton = Vue.extend({//设置标签 props: ['names', 'item2'],//name

r囧r小猫/ 2022年05月03日 01:28/ 0 赞/ 205 阅读

相关基于vue的自定义日历组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

你的名字/ 2021年09月20日 07:46/ 0 赞/ 484 阅读

相关 vue 通讯录自定义组件

在线demo：[http://tangyupeng.top/dist/index.html\/phone][http_tangyupeng.top_dist_index.htm

Myth丶恋晨/ 2021年09月16日 13:12/ 0 赞/ 496 阅读