请问vue自定义父子组件之间怎么判断点击事件是点击了谁？

linjuming_phone 2022-11-17 09:04:30

<Parent>
    <div>1111111</div>
    <Child></child>
</parent>

我想做点击监控，在父组件中点击有可能会点中子组件，如果点中了子组件，则 conlse.log(子组件), 点击了父组件又不是点中击子组件，则console.log(父组件)

怎么做到？

...全文

102 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

lsswear 2023-02-01

打赏
举报

回复

click.stop

Ta曰丿、她活 2022-12-14

打赏
举报

回复

首先事件肯定会冒泡的，所以你需要用 vue修饰符来解决

YiYanXiYin 2022-11-24

打赏
举报

回复 1

你要知道事件冒泡的概念, 点子组件, 会触发子组件和父组件的点击事件, 先触发子组件的点击事件, 然后向父组件冒泡触发父组件的点击事件, 子组件点击事件里面可以阻止事件冒泡

Vue3中的父子组件通信利用了props和自定义事件，从而实现了数据的下传和事件的上浮，无疑为我们创造出了极大的便利。而这其中的原理和一些注意事项，都需要我们在实际的开发过程中去掌握和应用。最后，希望本文对理解Vue3中的父子组件通信机制以及如何使用props和自定义事件进行父子组件间通信有所帮助。近在最后，期待在未来的开发过程中，Vue3能带给我们更多的可能性和惊喜。

今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。问题二：如何实现子组件给父组件传值？（1）复习一下props父

因为vue 的数据是单向流动的，这是为了避免数据污染。在官方文档中也说到：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。大致归纳一下：父传子--传值、子传父--传事件 1、父传子如果传递的数据是对象格式的，那么在子组件内部监...

在 Vue 中，父子组件之间的传值有多种方式，不同的方式适应不同的场景。下面是 Vue 中父子组件传值的几种常见办法，以及每种方式的详细实例。方法适用场景优点props父组件向子组件传递数据简单、直观、符合单向数据流$emit子组件向父组件传递数据简单、直观、父子组件数据流通的标准方式v-model实现父子组件双向绑定数据简化双向绑定操作祖先组件与后代组件传值（跨级）跨级传值，避免多层组件传值的繁琐Vuex多个组件之间共享数据，跨组件传值适用于大型应用，集中管理状态，方便维护。

在，子组件中，我们是可以给 button 绑定 click 事件的，因为原生button 标签，本来就有 click 事件，这里只是巧妙利用了，子传父的一个思想，用 $emit 暴露出去一个自定义事件，父监听，，子组件触发了点击事件，同时，父也会监听到。在vue 项目开发中，常常为了，节省代码、高效利用，会封装自定义组件，封装自定义组件，传值就是 prop ，那绑定事件呢？假设，前提：d-button 没有绑定事件，父组件是这样写的，你点把，把 button 按钮，点烂，都不会有输出结果。

1,937

社区成员

868

社区内容

发帖

与我相关

我的任务

前端技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

亲爱的CSDN小伙伴你们好，我是一个全新的社区，成立之初请CSDN的小伙伴们帮忙推广一下我们VUE社区，欢迎大家来这里讨论VUE相关问题哦～

另外对社区做出重大贡献者，可以联系版主授予称号～

试试用AI创作助手写篇文章吧

+ 用AI写文章