记录@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()方法没有执行。

Logo

前往低代码交流专区

更多推荐