Vue.js修饰符链

我是Vue.js中的新手。我读文档，并且无法理解一个瞬间......Vue.js修饰符链

订购使用改性剂时，因为相关的代码是相同的顺序产生事项。因此，使用@ 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不会停止！但如果我点击父冒泡停止！这很有帮助！

但是，任何人都可以告诉我的例子和差异，如果我会使用防止和自我修饰符（与链接，复选框或可能与其他元素）？

感谢您的提前！

来源

2017-09-23 User Pro

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

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

来源

2017-09-23 13:22:52 ittus

举例说明链阶差分

<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

如果你点击范围，stackoverflow将打开。

如果您点击a，stackoverflow将不会打开。

@click。防止

如果你点击跨度，计算器将不会打开。

如果您点击a，stackoverflow将不会打开。

来源

2017-09-24 10:14:18

Vue.js修饰符链

回答

相关问题