Vue.js修饰链

Question

我是Vue.js的新手。我正在阅读文档，无法理解片刻...

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

  

使用修饰符时顺序很重要，因为相关代码是   以相同的顺序生成。因此使用@ click.prevent.self会   防止所有点击，而@ click.self.prevent只会阻止点击   关于元素本身。

我无法理解是什么意思' 因此使用@ click.prevent.self会阻止所有点击，而@ click.self.prevent只会阻止对元素本身的点击。 < / strong>'任何人都可以举例说明防止默认操作并显示差异......

例如使用链接（<a href="https://stackoverflow.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

您可以查看此示例： 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 ，则会打开stackoverflow。
  
2. 如果您点击 a ，则不会打开stackoverflow。
  

<强> @ click.prevent

  

  
1. 如果您点击 span ，则不会打开stackoverflow。
  
2. 如果您点击 a ，则不会打开stackoverflow。