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修飾符鏈

回答

相關問題