一.@click和@click.native的區(qū)別

vue @click.native 原生點擊事件：

1，給vue組件綁定事件時候，必須加上native ，不然不會生效（監(jiān)聽根元素的原生事件，使用 .native 修飾符）

2，等同于在子組件中：

子組件內部處理click事件然后向外發(fā)送click事件：$emit("click".fn)

不多說看代碼：

直接在封裝組件上使用@click，看看有什么效果

封裝組件wrap-component.vue

?<template>
? ?<button>封裝組件的點擊事件</button>
?</template>
??
?<script>
?export default {
? ?name: 'wrapComponent'
?}
?</script>
??
?<style>
??
?</style>

?<template>
? ?<div class="home">
? ? ?<h2>父組件</h2>
??
? ? ?<wrap-component @click="handleClick"></wrap-component>
? ?</div>
?</template>
??
?<script>
?import wrapComponent from '@/components/wrap-component.vue'
??
?export default {
? ?name: 'HomeView',
? ?components: {
? ? ?wrapComponent
?  },
? ?methods: {
? ? ?handleClick () {
? ? ? ?console.log('點擊了封裝組件的按鈕')
? ?  }
?  }
?}
?</script>
??

二.其他修飾符

在事件處理器中可以使用event.preventDefault()（阻止原生事件）， event.stopPropagation()（阻止事件冒泡）。 vue.js為 v-on 提供兩個 事件修飾符：.prevent 與 .stop，讓html就可以實現這兩個功能，不需要再在js中單獨寫

?<!-- 阻止單擊事件繼續(xù)傳播 -->
?<a v-on:click.stop="doThis"></a>
??
?<!-- 提交事件不再重載頁面 -->
?<form v-on:submit.prevent="onSubmit"></form>
??
?<!-- 修飾符可以串聯 -->
?<a v-on:click.stop.prevent="doThat"></a>
??
?<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
?<!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內部元素進行處理 -->
?<div v-on:click.capture="doThis">...</div>
??
?<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數 -->
?<!-- 即事件不是從內部元素觸發(fā)的 -->
?<div v-on:click.self="doThat">...</div>

?<!-- 點擊事件將只會觸發(fā)一次 -->
?<a v-on:click.once="doThis"></a>
??
?<!-- 不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上,該處理函數只會觸發(fā)一次 -->
?<wrap-component @click.native.once="clickTree"></wrap-component>

?<template>
? ?<div class="home" @click="handleParentClick">
? ? ?<h2>父組件</h2>
??
? ? ?<div>
? ? ? ?<wrap-component></wrap-component>
? ? ?</div>
? ?</div>
?</template>
??
?<script>
?import wrapComponent from '@/components/wrap-component.vue'
??
?export default {
? ?name: 'HomeView',
? ?components: {
? ? ?wrapComponent
?  },
? ?methods: {
? ? ?handleParentClick () {
? ? ? ?console.log('觸發(fā)了父組件的點擊事件')
? ?  }
?  }
?}
?</script>

觸發(fā)了封裝組件的點擊事件，也冒泡到了父組件，觸發(fā)了父組件的點擊事件

解決

在第一點的時候，介紹了native的作用，它把組件變回原生DOM的一種方式，相當于給組件綁定原生事件，那我們可以直接在組件上使用@click.native.stop來阻止第三方組件內部點擊事件的冒泡嗎？

父組件HomeView.vue

?<template>
? ?<div class="home" @click="handleParentClick">
? ? ?<h2>父組件</h2>
??
? ? ?<div>
? ? ? ?<wrap-component @click.native.stop></wrap-component>
? ? ?</div>
? ?</div>
?</template>
??
?<script>
?import wrapComponent from '@/components/wrap-component.vue'
??
?export default {
? ?name: 'HomeView',
? ?components: {
? ? ?wrapComponent
?  },
? ?methods: {
? ? ?handleParentClick () {
? ? ? ?console.log('觸發(fā)了父組件的點擊事件')
? ?  }
?  }
?}
?</script>
??

?<template>
? ?<div class="home" @click="handleParentClick">
? ? ?<h2>父組件</h2>
??
? ? ?<div @click.stop>
? ? ? ?<wrap-component></wrap-component>
? ? ? ?<wrap-demo></wrap-demo>
? ? ?</div>
? ?</div>
?</template>
??
?<script>
?import wrapComponent from '@/components/wrap-component.vue'
?import wrapDemo from '@/components/wrap-demo.vue'
??
?export default {
? ?name: 'HomeView',
? ?components: {
? ? ?wrapComponent,
? ? ?wrapDemo
?  },
? ?methods: {
? ? ?handleParentClick () {
? ? ? ?console.log('觸發(fā)了父組件的點擊事件')
? ?  }
?  }
?}
?</script>
??

本文轉載于:

https://juejin.cn/post/7274883755478335546

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-695934.html