Vue中@click事件無效？@click.native中.native的含義和使用

記錄@click綁定事件的一個坑

問題描述：

今天開發的時候，給元件綁定了@click事件，但是事件卻沒有執行。

代碼如下：

<template>
<div>
	<span>父元件頁面</span>
	 <search @click="onSubmit"></search>
</div>
</template>
<script>
methods: {
	onSubmit() {
		alert('show')
	}
}
</script>
           

子頁面search.vue

<template>
	<div>
		<button>點選查找</button>
	</div>
</template>
<script>
</script>
           

search是我自己封裝的一個元件，問題就出在這兒，search是子元件，想要直接在父元件觸發click方法。

方案一：不改變子元件頁面的話，父頁面就必須這麼寫

<search @click.native="onSubmit"></search>
           

方案二：

父頁面

<template>
<div>
	<span>父元件頁面</span>
	 <search @click="onSubmit"></search>
</div>
</template>
<script>
methods: {
	onSubmit() {
		alert('show')
	}
}
</script>
           

子頁面search

<template>
	<div>
		<button @click='handleClick'></button>
	</div>
</template>
<script>
methods: {
	handleClick() {
		this.$emit('click')
	}
}
</script>
           

至于為什麼加上.native就可以直接觸發事件，是因為使用.native之後父級元件可以像處理原生的DOM事件一樣通過 v-on 監聽子元件執行個體的任意事件(@即為v-on:的簡寫)，如果不加natvie，會認為監聽的是來自子元件search.vue自定義的事件，然而子元件内也沒有使用$emit()來将子元件的觸發事件抛出，是以onSubmit()方法沒有執行。