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

目录

• 原因：
• 解决方法：
• 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>

原文地址：https://blog.csdn.net/jiangjunyuan168/article/details/120930879