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

事件冒泡

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

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

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

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

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

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

So easy，只需要在×上添加个stop：

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

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

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

js 复制代码

methods: {
    handleEvent(event) {
        event.stopPropagation(); 
        // 其他处理逻辑 
      } 
    }

emits

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

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

不需要import引入任何东西，直接定义：

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

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

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

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

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