关于vue中需要注意的那些细节(一)

最近写项目时突发奇想,写一个vue的细节专栏吧,把过程中碰到的需要注意的地方都用文字的形式组织一下,当做自己的一个复习,没事的时候回来看看,同时也希望可以帮助到大家。

事件冒泡

今天写订餐系统的时候,我发现我写的详情页怎么 ×× 不掉。最后我发现就是事件冒泡的原因。

事件冒泡是什么:

在 HTML DOM 结构中,当一个事件在一个元素上触发时,该事件会向上传播至该元素的所有父级元素,直到到达文档的根元素。这意味着,如果你在子元素上点击,事件不仅会在子元素上触发,还会在它的父元素、祖父元素等上触发,除非事件传播被阻止。

我实现不了的原因:

我的实现原理是点击整个header会出现一个覆盖全屏的详情页,在父元素中我添加了个点击事件来让显示的属性变为true:

接着在详情页的×上添加点击事件close:

声明close方法并且通过emits将事件传出:

原因就是详情页是header的组件,使得在点击×时会发生事件冒泡,导致header的点击事件也执行,所以showDetail的变化历程就是true -> false -> true,使得详情页无法关闭。

解决:

So easy,只需要在×上添加个stop:

便可以阻止冒泡,只在子元素上处理事件,而不影响父元素的行为。

拓展:

  • 使用.self修饰符

.self 修饰符只会当事件是由绑定该事件的元素本身触发时,才会触发事件处理程序。这意味着,如果事件是由子元素触发的,那么这个事件就不会触发处理程序。比如在这个例子中在header上加上它就可以了。

  • 使用event.stopPropagation()

在事件处理函数中,你可以手动调用 event.stopPropagation() 来阻止事件向上冒泡。这通常在处理函数内部进行:

js 复制代码
methods: {
    handleEvent(event) {
        event.stopPropagation(); 
        // 其他处理逻辑 
      } 
    }

emits

既然上面用到了 emits ,那我们也来聊聊它吧。

该例子中emits的功能:

创建一个事件让子组件可以修改自己父容器中的变量,将父容器中的showDetail改成了false,满足了利用组件中的点击事件来修改父容器的值的需求。

怎么用:

不需要import引入任何东西,直接定义:

怎么理解创建事件呢,就相对于我们写了一个点击事件,这就是创建事件,然后我们在页面点击它时就是发布了一个事件。在这里就是创建了hide事件,然后在点击时发布这个事件并带有一个false的参数。接着在父容器中组件的属性中加上@hide="handle",将hide这个事件命名为handle:

然后我们就可以在父容器中定义它:

e就是子组件带来的false参数,此时我们就成功修改了showDetail的值。

emits让组件之间的交互更加清晰,增强了组件的可读性和可维护性。

结语

那么这次的分享就先到这里,虽然很基础,但也希望能对大家有些帮助。

相关推荐
不爱吃糖的程序媛13 分钟前
浅谈前端架构设计与工程化
前端·前端架构设计
BillKu2 小时前
Vue3 Element Plus 对话框加载实现
javascript·vue.js·elementui
郝YH是人间理想2 小时前
系统架构设计师案例分析题——web篇
前端·软件工程
Evaporator Core2 小时前
深入探索:Core Web Vitals 进阶优化与新兴指标
前端·windows
初遇你时动了情3 小时前
html js 原生实现web组件、web公共组件、template模版插槽
前端·javascript·html
QQ2740287563 小时前
Soundness Gitpod 部署教程
linux·运维·服务器·前端·chrome·web3
前端小崔3 小时前
从零开始学习three.js(18):一文详解three.js中的着色器Shader
前端·javascript·学习·3d·webgl·数据可视化·着色器
哎呦你好3 小时前
HTML 表格与div深度解析区别及常见误区
前端·html
运维@小兵3 小时前
vue配置子路由,实现点击左侧菜单,内容区域显示不同的内容
前端·javascript·vue.js
koiy.cc4 小时前
记录:echarts实现tooltip的某个数据常显和恢复
前端·echarts