vue 在组件中绑定的监听事件触发多次原因

最新推荐文章于 2023-09-25 11:48:58 发布
最新推荐文章于 2023-09-25 11:48:58 发布
阅读量2.2k 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44249754/article/details/120705410
版权
前端 同时被 2 个专栏收录
56 篇文章 0 订阅
订阅专栏
vue
17 篇文章 0 订阅
订阅专栏

在mounted生命周期中，使用

document.addEventListener("click", event => {
	console.log("click-listener")
})

如果组件在父组件中多次引用，会导致多次执行上面这段代码，触发点击事件时也会执行多次。
找到执行多次的原因就好解决了

wode路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue学习笔记之给组件绑定原生事件操作示例
11-21
本文实例讲述了vue学习笔记之给组件绑定原生事件操作。分享给大家供大家参考，具体如下： 当在父组件中定义一个点击事件，并且在父组件的methods中定义了这个点击事件时，在页面上点击并不会有什么反应。那么该怎么办呢？ 我们可以在子组件的template中的dom上定义一个点击事件（原生事件），并且在子组件的methods中定义该点击事件，然而点击页面时也只会alert(child click )。 这是为什么呢？父组件的点击事件被vue当成自定义事件，点击后没有检测到，这时需要子组件向父组件触发点击’自定义’事件，即 this.$emit('change') 。then，完成。先响应了chil
watch监听的immediate:true理解
热门推荐
weixin_42484910的博客
07-21 1万+
解释immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。所以当为true时在created周期里就可以不用在写已经在watch中写过的方法了。...
vue 侦听器watch 之 深度监听 deep 以及 immediate
Don't disturb me!的博客
08-17 2742
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div> </template> <script> export default { data(){
Vue TypeScript @Watch监听里面immediate的用法
小小只程序媛
12-28 1709
vue watch监听里面immediate的用法实例
vue监听路由变化时watch方法会执行多次的原因及解决
最新发布
qq_43086723的博客
09-25 2941
vue监听路由变化时watch方法会执行多次的原因及解决
vue3中监听路由，被重复执行问题
wangyuiba1314的博客
05-11 2992
vue3中监听路由，被重复执行问题 项目场景：监听route变化，当已经离开了页面，watch却还在被触发 问题描述 本来我是在Layout文件中监听了路由 但是我发现我前往非Layout下的路由,比如404页面，watch依旧被触发，并且从404页面返回时，watch会一直执行两次，除非刷新 Layout/index.vue watch(() => route, (val) => { // ... }, { immediate: true, deep: true
vue watch监听执行2次
u014788505的博客
12-20 8909
原理：watch监听 原理是监听模式 下的新旧数据改变 他是2个条件语句 所以会执行2次 解决方案：使用锁的概念 data() { return { isGetRoute:false } }, watch: { $route(route) { if (this.isGetRoute) { this.isGetRoute = !this.isGetRoute .
Vue3 中 使用watch 监听路由中的值 会执行多次
qq_38758763的博客
06-24 3238
Vue3 中 使用watch 监听路由中的值 会执行多次
vue用watch监听对象之后，调用方法执行多次的问题
weixin_52936828的博客
08-09 2826
问题描述：用watch监听的过程中发现，如果监听的是一个对象或者一个数组，会导致多次调用watch里面的方法，如下接口调用了两次，浪费资源。以上方法可以解决watch监听导致多次调用的问题。大家如果有好的方法也可以留言，互相学习，嘻嘻☺。
浅谈Vue.js 组件中的v-on绑定自定义事件理解
12-29
每个 Vue 实例都实现了事件接口(Events interface)，即： ...另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 下面是一个文档上面的例子： 2017年4月11日更新 <p>{{ total }
vue 监听 Treeselect 选择项的改变操作
01-19
项目中使用 Treeselect 时，需要获取选项的变化从而触发别的事件，所以需要监听Treeselect 所选择的值。 我使用了watch 来监听 treeselect 绑定的 model ，如果 model 的值发生变化就触发 currDeptChange 事件。 ...
Vue.js 组件 – 自定义事件
11-20
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。 实例 {{ total }} Vue.component('button-co
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用，如...el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。 解决办法：加上.native原生事件修饰符即可。
layui中select设置disabled
weixin_44249754的博客
08-11 8972
1.选择器直接选择到下拉框好用，如下： $('select[name=departId]').attr("disabled","disabled"); 下面这种不好使： $('#_ut').find('select').attr("disabled",'disabled'); 2. 对于设置了lay-search的下拉框，若想在设置不可下拉的同时去掉输入属性，需要将input属性设置为readonly,且必须在form.render()之前设置select，之后设置input，如下： //去掉下拉 $('s
阻止浏览器回退、刷新、关闭页面事件（ember / vue 框架）
weixin_44249754的博客
12-23 4711
以ember框架为例： 封装的service： import Service from '@ember/service' import { inject as service } from "@ember/service" import fetch from 'fetch' import { tracked } from '@glimmer/tracking' import { action } from '@ember/object' export default class BrowserEvent
npm安装express及查看版本，基本使用
weixin_44249754的博客
10-20 4563
1.首先确定你已经安装了 Node.js，然后去你创建的项目目录下打开命令窗口，执行sudo npm install express -g 2.执行npm list express查看版本 3.在项目下新建一个server.js文件，输入以下代码： const express = require('express'); const app = express(); app.get('/', function(req, res) { res.send('<h1>2222222222222
VueTreeselect 插件使用
weixin_44249754的博客
06-22 4522
VueTreeselect 地址：https://www.vue-treeselect.cn/ 使用@select监听树形下拉选中事件： <template slot-scope="scope"> <treeselect v-model="scope.row.departId" @select="departTreeSelected" :disable-branch-nodes="false" :show-count="false" :m
IE8中，回车键自动触发layui中button的lay-event事件
weixin_44249754的博客
08-07 4079
原因：IE中回车键会自动绑定button的submit事件 解决：将button加上type="button"属性一般可解决问题。 若上述方法不行，将可在这些按钮前加上一个type=“submit”的隐藏button，亲测设置display:none不好用，可尝试将button背景色设置和背景颜色相同或设置宽度为0等方法隐藏。 ...
vue3中如何在点击事件触发后绑定一个监听事件
05-12
在Vue3中，你可以使用`@click`指令来绑定一个点击事件，并使用`.once`修饰符来绑定一个只触发一次的监听事件。例如： ```html 点击 export default { methods: { handleClick() { console.log('点击事件被...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值