VUE div click无效的问题及解决

目录

• 记录@click绑定事件的一个坑

VUE div click无效

每逢半年  总要遇到一个前端诡异问题，花了个把小时才解决，记录一下

    div v-else-if="ITem.tyPE ===7" class="left-title bgc-opacity" :style="styleObj" @click="changeliveisResize(true)">
          !-- 字幕 -->
          div v-if="!item.text">
            div class="text-son">
{
{
 $t('PRogram.caption') }
}
    /div>
          /div>
          div v-else>
        div class="left-align-text caption-text" :style="{
fontSize: item.fontSize + 'px', color: item.fontColor}
    ">
 {
{
 item.text }
}
     /div>
          /div>
        /div>
    

当@Click写在里面div时 无反应  写在外面有反应

当@Click写在里面DIV时 把外面的:style="styleObj"移出  也有反应

@click事件无效？@click.native中.native的含义和使用

记录@click绑定事件的一个坑

问题描述：

今天开发的时候，给组件绑定了@click事件，但是事件却没有执行。

代码如下：

template>
    div>
        span>
    父组件页面/span>
         seArch @click="onSubmit">
    /search>
    /div>
    /template>
    script>
methods: {
    onSubmit() {
        alert('show')    }
}
    /script>
    

子页面search.vue

template>
        div>
            button>
    点击查找/button>
        /div>
    /template>
    script>
    /script>
    

search是我自己封装的一个组件，问题就出在这儿，search是子组件，想要直接在父组件触发click方法。

方案一：不改变子组件页面的话，父页面就必须这么写

search @click.native="onSubmit">
    /search>
    

方案二：

父页面

template>
    div>
        span>
    父组件页面/span>
         search @click="onSubmit">
    /search>
    /div>
    /template>
    script>
methods: {
    onSubmit() {
        alert('show')    }
}
    /script>
    

子页面search

template>
        div>
            button @click='handleClick'>
    /button>
        /div>
    /template>
    script>
methods: {
    handleClick() {
        this.$emit('click')    }
}
    /script>
    

至于为什么加上.native就可以直接触发事件，是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件search.vue自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue自定义组件@click点击失效问题及解决
• 解决vue组件中click事件失效的问题
• vue开发移动端使用better-scroll时click事件失效的解决方案

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！