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://stackru.com">@click.prevent.self="fn" or @click.self.prevent="fn" difference</a>)

Я знаю о фазах событий (захват, цель и пузыри).

Например, это может быть полезно на этапе Bubbling:

<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

Bubblig не останавливается! Но если я нажму на родительском пузыре, остановился! Это полезно!

Но может ли кто-нибудь показать мне примеры и разницу, если я буду использовать предотвращение и самомодификацию (со ссылками, флажками или может быть с другими элементами)?

Спасибо за продвижение!

Answer 1

Пример иллюстрирует разницу в порядке цепочки

<div id="app">
  <a href="https://stackru.com" @click.self.prevent target="_blank">Stackofervlow!
    <span :style="{ background: 'yellow', width: '100px', height: '100px' }">span</span>
  </a>
</div>

new Vue({
  el: '#app'
});

@click.self.prevent

1. Если вы нажмете на span, откроется stackru.
2. Если вы нажмете на, stackru не откроется.

@ click.prevent

1. Если вы нажмете на span, stackru не откроется.
2. Если вы нажмете на, stackru не откроется.

Answer 2

Вы можете проверить этот пример: https://jsfiddle.net/50wL7mdz/39994/

Если вы используете @click.prevent.selfВы не можете нажать на что-нибудь. Это предотвращает все щелчки. Если вы используете @click.self.prevent, это только предотвращает, когда вы нажимаете на <a> элемент, мы все еще можем нажать на выбрать файл, чтобы загрузить файл