Vue.js改性剂链

Question

我是Vue.js的新手。我在看医生，一点也听不懂.

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

order在使用修饰符时很重要，因为相关代码是按照相同的顺序生成的。因此，使用@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

Bubblig没有停下来！但如果我点击父母冒泡停止！这很有帮助！

但是，如果我使用“防止”和“自我修饰符”(带有链接、复选框或可能与其他元素一起使用)，谁能给我举例子和区别吗？

谢谢你的提前！

Answer 1

您可以检查这个示例：https://jsfiddle.net/50wL7mdz/39994/

如果使用@click.prevent.self，就不能单击任何东西。它可以防止所有的点击。如果您使用@click.self.prevent，它只会防止您单击<a>元素，我们仍然可以单击选择文件上传文件。

Answer 2

示例说明了链顺序的不同

<div id="app">
  <a href="https://stackoverflow.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，堆栈溢出将打开。
2. 如果单击a，堆栈溢出将不会打开。

@click.prevent

1. 如果单击span，堆栈溢出将不会打开。
2. 如果单击a，堆栈溢出将不会打开。