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

原因：

根据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>

到此这篇关于vue中@click绑定事件点击不生效的解决方案的文章就介绍到这了,更多相关vue中@click绑定事件点击不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！