vue自身解决冒泡等常见问题的方法

Vue.js 提供了一些内置的修饰符来解决冒泡等常见问题，包括：

- .stop：阻止事件继续传播，相当于调用 event.stopPropagation() 方法。
- .prevent：阻止默认事件，相当于调用 event.preventDefault() 方法。
- .capture：使用事件捕获模式，即从外向内依次触发事件处理程序。
- .self：只有事件是从当前元素触发时才触发事件处理程序。
- .once：只触发一次事件处理程序，相当于调用 event.target.removeEventListener(eventName, eventHandler) 方法。

例如，有如下的代码：

<!-- 阻止事件冒泡 -->
<div @click.stop="parentClick">
  <div @click="childClick"></div>
</div>

<!-- 阻止默认事件 -->
<form @submit.prevent="onSubmit">

<!-- 使用事件捕获模式 -->
<div @click.capture="clickHandler"></div>

<!-- 只有事件是从当前元素触发时才触发事件处理程序 -->
<div @click.self="clickHandler"></div>

<!-- 只触发一次事件处理程序 -->
<div @click.once="clickHandler"></div>

除了内置的修饰符，Vue.js 还提供了自定义事件修饰符的功能，可以通过 Vue.directive() 方法来定义自己的事件修饰符。例如：

Vue.directive('my-modifier', {
  bind: function (el, binding, vnode) {
    // 事件处理程序
    var eventHandler = function (event) {
      // 判断是否符合条件
      if (...) {
        // 执行事件处理程序
        ...
      }
    };
    // 添加事件监听器
    el.addEventListener('click', eventHandler);
  }
});

<!-- 使用自定义修饰符 -->
<div v-my-modifier="condition"></div>

以上是一些常见的 Vue.js 内置解决冒泡等问题的方式，可以根据实际需求选择合适的方式来解决问题。