VUE div click无效的问题及解决

目录
  • VUE div click无效
  • @click事件无效？@click.native中.native的含义和使用
    • 记录@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()方法没有执行。

总结

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

赞 (0)

相关推荐

  • 解决vue组件中click事件失效的问题

    最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&

  • vue开发移动端使用better-scroll时click事件失效的解决方案

    vue开发移动端使用better-scroll时click事件失效的解决方案

    最近使用vue学习开发移动端的项目,使用了better-scroll插件做滚动. 在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报 [vuex] unknown mutation type: changeCit

  • vue自定义组件@click点击失效问题及解决

    vue自定义组件@click点击失效问题及解决

    目录 自定义组件@click点击失效 问题描述 原因分析 问题解决 @click不起作用,同时报错 自定义组件@click点击失效 问题描述 自定义组件在使无法,无法绑定原vue文件内的原生click事件 原因分析 根据查询vue官方文档,得知click事件作用于组件内部,如果组件内没有写click事件,便会无响应. 问题解决 1.参照官方文档,可以用@click.native=“click”解决 2.可以用:将事件传递至组件内,也符合组件间的单向数据流,我就是这样解决的 主组件写法: 被调用组

  • VUE div click无效的问题及解决

    目录 VUE div click无效 @click事件无效?@click.native中.native的含义和使用 记录@click绑定事件的一个坑 总结 VUE div click无效 每逢半年  总要遇到一个前端诡异问题,花了个把小时才解决,记录一下     <div v-else-if="item.type ===7" class="left-title bgc-opacity" :style="styleObj" @click=&q

  • 解决vue 退出动画无效的问题

    遇到一个问题:给模态框加入退出动画,进入的动画效果是有的,可是退出的动画就没有了. 写个简单的结构: <div class="<strong>mask</strong>" v-show="warning"><br> <transition name="warning"><br> <div v-show="warning" class="wa

  • 解决vue scoped scss 无效的问题

    今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent

  • vue data对象重新赋值无效(未更改)的解决方式

    vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{},那么后面在方法用普通的js语法赋值会无效 这里是data data() { return { model: {} }; } 这里是方法里的普通赋值 afterUpload(response) { this.model.icon = response.url; } 普通方法会无效,需要使用vue提供的方法重新显示声明 afterUpload(response) { this.$set(this.model,'icon',r

  • vue使用Echarts设置数据无效问题记录及解决方法

    vue使用Echarts设置数据无效问题记录及解决方法

    目录 场景: 遇到的问题: 最终解决方案: 小结: 场景: 做一个动态的柱状图,模拟socket效果,如图所示: 遇到的问题: 元数据格式是这样的: config: { data: [ { name: '义乌市', value: 169 }, { name: '东阳市', value: 123 }, { name: '武义县', value: 98 }, { name: '兰溪市', value: 75 }, { name: '金东区', value: 66 }, ], colors: ['#e

  • vue props传值失败 输出undefined的解决方法

    如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值: <code class="language-html"><div id="app"> <test :type="type"></test> </div> Vue.component("test", { props: ['type'], template: '<div @cli

  • vue v-on:click传递动态参数的步骤

    最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案, 新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案,居然也能解决这个问题,作此记录留待以后会有更好的方法解决这个事情 需求:根据每列传递的参数,决定弹窗后面是积分够了去直接购买还是不够需要去转换 二.页面代码[无法可传的参数,我把它放进了一个自定义标签date-id] <div class="ticket-main"> <a href="java

  • vue 实现click同时传入事件对象和自定义参数

    vue 实现click同时传入事件对象和自定义参数

    仅仅传入自定义参数 HTML <div id="app"> <button @click="tm(123)">ddddd</button> </div> JS代码 new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } } }) 仅仅传入事件对象 HTML <div id="app"> <button @cl

  • vue文本识别"\n"换行问题的解决方式

    目录 一.通过 css属性 实现 二.使用v-html实现 三.<pre>标签 附实践模块,温馨提示 基于vant改造 总结 在 vue 项目,有时请求返回的数据 中会有含有 \n 的字符串,如果直接渲染的话无法实现换行. 一.通过 css属性 实现 设置 white-space: pre-wrap;  代码如下: <div style="white-space: pre-wrap;">{{含有\n的字符串}}</div> 扩展: white-spa

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

随机推荐