$emit input会有事件穿透现象

最新推荐文章于 2024-05-15 15:27:41 发布
最新推荐文章于 2024-05-15 15:27:41 发布
阅读量604 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38180363/article/details/104993238
版权

描述：

祖先组件一级  <grandfather></grandfather>

父级组件二级  <father></father>

子组件三级     <son></son>

<grandfather>

   <father></father>

  <son></son>

</grandfather>

子组件触发$emit('input',params)  在触发父组件的时候也触发到爷爷组件 造成数据变化

解决办法： 在这个子组件中做一个判断，是去触发父组件还是爷爷组件

 

一枚小小的菜鸟
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
**My Coding Family**
03-23 1942
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
Vue $emit()不能触发父组件方法的原因及解决
10-15
在Vue.js中，组件间的通信是通过事件和监听器来实现的，其中 `$emit` 是子组件用来触发自定义事件的关键方法。当遇到 `$emit` 无法触发父组件方法的情况，开发者可能会感到困惑。本文将深入探讨这个问题的原因以及...
弹出输入框，点击穿透的问题
dai_yanxia的博客
10-09 461
最近项目遇到一个问题，弹框里面包含输入框，我们输入内容以后，点击确定按钮，此时弹框也会跟着消失，而这不是我们想要的效果，因为我们可能需要在判定用户是否输入正确才决定是否让弹框消失，如果用户输入错误，我们只是提示输入内容错误，用户会继续输入，如果此时我们弹框消失了，用户就需要再走之前的操作，可能需要先点击某个按钮，让弹框显示出来。这样肯定是不合常理的。 那首先我们需要知道这个问题是如何造成的，才可以解决这个问题，刚开始以为穿透的问题，是用户在点击确定按钮的时候，穿透到了下面的弹框，触发了弹框的点击事件，但是有
子传父 this.$emit(‘input‘,val)
最新发布
fangcaojuanjuan的博客
05-15 518
如果不用input,则需要用子传父组件里面的方法，在父组件中复制。选用input，在父组件中直接用v-model绑定就好了。
有关input输入框内容改变后的触发事件
热门推荐
yyc13579的博客
08-02 2万+
有关input输入框内容改变后的触发事件，也是今天遇到的问题。我使用时间插件为输入框填充内容，想实现输入框内容改变后执行相应的方法，发现使用change方法没有反应。百度了半天，最后才发现问题所在。我这边考虑两种情况，一种是input输入框正常输入，另一种是给输入框赋值。1、input输入框正常输入所谓的正常输入，就是在input输入框当中进行手动输入，这种情况下change方法是有效的。
vue中v-model的双向绑定原理及$emit(“input“)的使用
weixin_44090040的博客
04-12 4115
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作： v-bind绑定一个value属性 v-on指令给当前元素绑定input事件 自定义组件使用v-model，应该有以下操作： 接收一个value prop 触发input事件，并传入新值 在原生表单元素中： <input v-model="inputValue"> 相当于 <input v-bind:value="inputValue" v-on:input="inputValue = $eve
微信小程序input、textarea层级过高的穿透问题如何解决
chali1314的博客
03-28 4817
微信小程序原生组件camera、canvas、input（仅在focus时表现为原生组件）、live-player、live、pusher、map、textarea、video的层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，所以会出现穿透现象。比如，有一个列表弹窗，弹窗下面挡着一个input，当点击列表某一项时，如果这一项刚好跟下面的input输入框重合，则会出现下面input获取焦点显示的情况，这个就是穿透现象。 解决办法如下： 1、使用if，当触发选择列表..
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平...父子组件之间事件触发可以使用$emit $emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU() { this.dialogVisible = false; this.$emi
vue使用$emit时,父组件无法监听到子组件的事件实例
01-21
vue使用$emit时，父组件无法监听到子组件的事件的原因是$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名 <p>{{ total }} <button-counter v-on:ee=incrementTotal></button-counter> ...
详解vue中this.$emit()的返回值是什么
10-17
例如，在提供的代码示例中，子组件`EventDemo`有一个`handleChange`方法，该方法在`input`元素的`change`事件触发时被调用。在这个方法里，`this.$emit('Echange', e.target.value, val => { console.log(val); })`...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
移动端h5页面touch事件与点击穿透问题
weixin_30746117的博客
04-29 1643
前言 做过移动端H5页面的同学肯定知道，移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章，我想再来回顾下touch事件的原理，为什么通过touch可以触发click事件，touch事件是不是万能的以及它可能存在的问题。 touch事件的来源 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和clic...
vue -- $emit input 与 v-model（父组件文本框与子组件文本框内容同步更新）
笑望灬星辰
11-29 1618
业务场景 父组件文本框与子组件文本框内容同步更新 直接上代码 父組件 <template> <div style="padding:30px"> <div>我是父组件</div> <a-input v-model="parent" style="width:30%" placeholder="我是父组件"></a-input> <children v-model="parent" :parent="pa
vue子传父的一种新方法：this.$emit(‘input‘, value)可实现实时向父组件传值
xinbaiyu的博客
08-02 2935
今天要说的就是利用v-model和this.$emit(‘input’,value)实现子传父。众所周知，v-model是给input绑定，方便对表单的双向绑定。其实，v-model是个语法糖，具体案例如下所示。
this.$emit(‘input‘, event.target.value) 关于element ui的inputd输入框的理解
qq_43634411的博客
08-05 1528
v-model 其实是两个操作的合集 1 v-model 其实是v-bind(:)绑定一个value属性值 2 v-on 指令给当前元素绑定input 输入事件 自定义组件使用了v-model 应该触发两个事件 1 子组件接收一个 value 的prop 2 触发一个input 事件 ，并串如最新的输入值 3 如下图所示 vue 在父子组件传值时，除了传统的父组件 ：（绑定）属性去传值外，还可以使用 父组件v-model传值，子组件props[‘value’]接收，而子组件也可以通过$emit(‘inpu
vue中的this.$emit(‘input‘,this.val)；是什么意思?
qq_26642611的博客
01-20 2万+
子组件 <template> <div> <div class="group"> <label>{{title}}</label> <input type="text" placeholder="请输入" @input="changeData()" v-mode...
vue的组件通信方式
weixin_43523066的博客
08-06 245
组件通信方式一.props / $emit1. 父组件向子组件传值2. 子组件向父组件传值二、 $children / $parent三、provide/ inject四、ref / refs五、eventBus六、Vuex1. Vuex介绍2. Vuex各个模块3. Vuex实例应用七、localStorage / sessionStorage八 $attrs与 $listeners 一.p...
玩转代码|组件封装之Slots、Emit和Props穿透
Jum的博客
12-08 1200
希望本文可以让你有所收获，穿透的方案有很多，本文介绍的是我在项目中实际使用到的几种方法，尤其是在重度依赖第三方UI组件库的的情况下特别适用，既能很好的兼顾三方组件库的原生Api，也能在此基础上进行增量扩展。
Vue组件间通信
weixin_47074432的博客
09-18 2273
Vue组件间传值 一、父组件调用子组件的数据和方法 1、$children 通过this.$children.search()访问子组件中定义的属性或方法 2、ref // 父组件通过ref给子组件做一个标记 <outSide ref="test"> </outSide > 通过this.$refs.test.search()访问子组件的属性或方法 3、$emit // 子组件 this.$emit("test",data) //data是需要传递的数据 // 父组件
this.$emit的input事件
10-11
this.$emit('input', value) 是在 Vue.js 中用于向父组件传递数据的一种方式。它会触发父组件中绑定在当前组件上的 v-model 指令所对应的 input 事件，并将 value 作为参数传递给该事件。 例如，在一个自定义的输入框组件中，我们可以这样使用 this.$emit('input', value) 来将用户输入的值传递给父组件： ``` <template> <input type="text" v-model="inputValue"> </template> <script> export default { props: ['value'], data() { return { inputValue: this.value } }, watch: { value(newValue) { this.inputValue = newValue }, inputValue(newInputValue) { this.$emit('input', newInputValue) } } } </script> ``` 在上面的代码中，我们通过 props 接收了一个名为 value 的属性，并将其赋值给了组件内部的 inputValue 变量。然后，我们通过 watch 监听了 value 和 inputValue 的变化，并在 inputValue 发生变化时触发了 input 事件，从而将最新的输入值传递给了父组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值