events - Vue.js 修飾子チェーン

Question

私は Vue.js が初めてです。私はドキュメントを読んでいて、一瞬理解できません...

https://vuejs.org/v2/guide/events.html

関連するコードは同じ順序で生成されるため、修飾子を使用する場合は順序が重要です。したがって、 @click.prevent.self を使用するとすべてのクリックが防止されますが、 @click.self.prevent は要素自体のクリックのみが防止されます。

意味が理解できません'したがって、@click.prevent.self を使用するとすべてのクリックが防止されますが、@click.self.prevent は要素自体のクリックのみが防止されます。' デフォルトのアクションを防止し、違いを示す例を誰でも挙げることができます...

たとえば、リンク ( <a href="https://stackoverflow.com">@click.prevent.self="fn" or @click.self.prevent="fn" difference</a>)

イベントフェーズ (キャプチャ、ターゲット、バブリング) について知っています。

たとえば、バブリング フェーズで役立ちます。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

.root {
  width: 300px;
  height: 300px;
  background: green;
  text-align: center;
  color: white;
}

.parent {
  width: 200px;
  height: 200px;
  background: red;
  text-align: center;
  color: white;
  margin: 50px
}

.child {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 50px;
  text-align: center;
  color: white;
}

<div id="app">
    <div class="root" v-on:click="log('root')">root
        <div class="parent" v-on:click.self.stop="log('parent')">Parent
            <div class="child" v-on:click="log('child')">Child
            </div>
        </div>
    </div>
</div>

<script type="text/javasctipt">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        log(message) {
          alert(message);
          console.log(message)
        }
      }
    })
</script>

子をクリックすると、出力が得られます：

child
root

バブルが止まらない！しかし、親をクリックするとバブリングが止まりました! 役に立ちました！

しかし、防止および自己修飾子 (リンク、チェックボックス、または別の要素を使用する場合) を使用する場合、誰かが例と違いを示すことができますか?

前もってありがとう！