$emit input会有事件穿透现象

最新推荐文章于 2024-08-07 16:07:39 发布

一枚小小的菜鸟

最新推荐文章于 2024-08-07 16:07:39 发布

阅读量629

点赞数 1

本文链接：https://blog.csdn.net/qq_38180363/article/details/104993238

版权

描述：

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

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

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

<grandfather>

<father></father>

<son></son>

</grandfather>

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一枚小小的菜鸟

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序-如何解决input、textarea层级穿透？【亲测有效】

**My Coding Family**

03-23

2035

微信小程序-如何解决input、textarea层级穿透？【亲测有效】

vue样式穿透和组件传值

cyqiangweihua的博客

12-10

1313

vue样式穿透和组件传值 vue样式穿透（深度作用选择器）问题产生原因：当前组件A引入一个其他组件B做应用，A组件由于scoped作用，本身的全部html标签都会包含一个 data-v-xxx 的属性名称，使得css样式达到私有效果。被使用的组件B由于某些原因，编译解析后各个html标签不会形成 data-v-xxx 的属性，这样在组件A中给组件B设置样式会导致无效解决办法： 1、通过深度作用...

参与评论您还未登录，请先登录后发表或查看评论

弹出输入框，点击穿透的问题

dai_yanxia的博客

10-09

529

最近项目遇到一个问题，弹框里面包含输入框，我们输入内容以后，点击确定按钮，此时弹框也会跟着消失，而这不是我们想要的效果，因为我们可能需要在判定用户是否输入正确才决定是否让弹框消失，如果用户输入错误，我们只是提示输入内容错误，用户会继续输入，如果此时我们弹框消失了，用户就需要再走之前的操作，可能需要先点击某个按钮，让弹框显示出来。这样肯定是不合常理的。那首先我们需要知道这个问题是如何造成的，才可以解决这个问题，刚开始以为穿透的问题，是用户在点击确定按钮的时候，穿透到了下面的弹框，触发了弹框的点击事件，但是有

有关input输入框内容改变后的触发事件

最新发布

liuxi_happy的博客

08-07

283

【代码】uniapp input穿透弹出层。

vue中v-model的双向绑定原理及$emit(“input“)的使用

weixin_44090040的博客

04-12

4175

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

关于vue组件事件属性穿透详解

10-16

在这个例子中，子组件不仅监听自身的`input`事件，还触发了一个名为`input1`的自定义事件，这个事件会传递给父组件。需要注意的是，当我们在子组件中直接修改`props`对象时，由于Vue使用了浅复制，这可能会改变父...

滑动穿透终极解决方案

riddle1981的博客

10-21

4932

问题描述滑动穿透：浮层上的触控会导致底层元素滑动。问题探究： 1、给body加overflow:hidden,pc端可以锁scroll，移动端无效 pc端可以直接overflow:hidden解决 2、给body加overflow:hidden及绝对定位，背景会定位到顶部，如果是单屏页面可以，长页面不适用如果弹出浮层时背景本来就没有滚动距离，可以overflow:hidden加绝对定位解决 ...

vue2 deep穿透

07-20

在 Vue 2 中，可以使用 `deep` 修饰符来实现深度穿透，即在组件的嵌套层级...当你在子组件中修改输入框的值时，会触发子组件的 `watch` 监听器，然后通过 `$emit` 方法将更新后的值传递回父组件，从而实现了深度穿透。

ui组件库的正确打开方式，利用v-model实现父子组件数据双向绑定以及样式穿透

weixin_44812997的博客

08-29

435

感慨 “纸上得来终觉浅，绝知此事要躬行。” 说实话，在没有参与工作之前，我一直认为自己对 vue 的了解和使用已经非常熟练和掌握了，现在再回头看一下，真的是有点太自大了，工作一小段时间后光是 vue 的使用就刷新了我的认知，解锁了许多我从前从未涉及的 vue 实用技巧和方法，现在就和大家分享一下让我印象比较深刻的几个实用技巧吧 v-model 有用过vue的小伙伴都知道，vue之所以好用，很大一部分的原因就是来自v-model，它的实时数据双向绑定，可以这么说，v-model是vue的精髓所在，但是大多数人

微信小程序input、textarea层级过高的穿透问题如何解决

chali1314的博客

03-28

4917

微信小程序原生组件camera、canvas、input（仅在focus时表现为原生组件）、live-player、live、pusher、map、textarea、video的层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，所以会出现穿透现象。比如，有一个列表弹窗，弹窗下面挡着一个input，当点击列表某一项时，如果这一项刚好跟下面的input输入框重合，则会出现下面input获取焦点显示的情况，这个就是穿透现象。解决办法如下： 1、使用if，当触发选择列表..

移动端h5页面touch事件与点击穿透问题

weixin_30746117的博客

04-29

1674

前言做过移动端H5页面的同学肯定知道，移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章，我想再来回顾下touch事件的原理，为什么通过touch可以触发click事件，touch事件是不是万能的以及它可能存在的问题。 touch事件的来源 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和clic...

vue -- $emit input 与 v-model（父组件文本框与子组件文本框内容同步更新）

笑望灬星辰

11-29

1651

业务场景父组件文本框与子组件文本框内容同步更新直接上代码父組件 <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

3128

今天要说的就是利用v-model和this.$emit(‘input’,value)实现子传父。众所周知，v-model是给input绑定，方便对表单的双向绑定。其实，v-model是个语法糖，具体案例如下所示。

this.$emit(‘input‘,val)的用法

weixin_44709363的博客

05-29

2199

父组件可通过v-model来接收子组件传递的参数，因为v-model的原理就是使用了@input事件实现双向数据绑定。同理，父组件v-model='val' 子组件通过props可接收父组件传递过来的val。

this.$emit(‘input‘, event.target.value) 关于element ui的inputd输入框的理解

qq_43634411的博客

08-05

1588

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

453

组件通信方式一.props / $emit1. 父组件向子组件传值2. 子组件向父组件传值二、 $children / $parent三、provide/ inject四、ref / refs五、eventBus六、Vuex1. Vuex介绍2. Vuex各个模块3. Vuex实例应用七、localStorage / sessionStorage八 $attrs与 $listeners 一.p...

Vue组件间通信

weixin_47074432的博客

09-18

2563

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 事件，从而将最新的输入值传递给了父组件。