vue中@click绑定事件点击不生效的原因及解决方案

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue中@click绑定事件点击不生效的原因及解决方案

Jiang_JY   2022-12-07 我要评论

原因:

根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。

解决方法:

方法1:在@click后加上.native(监听根元素的原生事件,使用 .native 修饰符)

@click.native = "..."

方法2:向外发送click事件
在 methods 内添加 _click 方法:

    methods: {
    
      _click: function () {
        this.$emit('click', function () {
          //...
        })
      }
      
    }

扩展知识点:

Vue中@click不生效的解决办法

问题产生的原因:
    如果是普通的HTML,@click可以触发。
    如果是使用ElementUI组件和路由,@click会失效。
因为Vue使用的是一套自己的事件传递机制,@click等事件是经过Vue封装的,需要为 @click 添加标识符 .native

<el-button type="primary" @click.native="clickFunction()">点击按钮</el-button>

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们