Vue 组件事件处理

Question

我有一个组件按钮，我几乎在网站的任何地方都使用该按钮。

它是一个带有一些悬停动画的 SVG 按钮。该按钮工作正常。

<template>	
	<a class="button"
		@mouseover="buttonEnter"
		@mouseout="buttonLeave">
		<svg viewBox="0 0 180 60">
			<path ref="btnPath" d="..." />
		</svg>
		<span ref="btnSpan">
			<slot>Button slot</slot>
		</span>
	</a>
</template>

<script>
import { buttonEnter, buttonleave } from '../assets/animate'

export default {
	name: 'AnimButton',
	methods: {
		buttonEnter(event) {
			buttonEnter(this.$refs.btnPath, this.$refs.btnSpan)
		},
		buttonLeave(event) {
			const buttonSpan = event.currentTarget.querySelector('span')
			buttonleave(this.$refs.btnPath, this.$refs.btnSpan)
		},
	},
}
</script>

现在我想将此按钮用作表单中的提交按钮。悬停事件正在发生，但似乎 @click 事件没有触发。

可能我错过了一些不好的东西。

<form>
  <input type="email">
  <input type="subject">
  <input type="message">
  
  <anim-button type="submit" @click="submit">
			Submit
	</anim-button>

</form>

<script>
import AnimButton from '~/components/AnimButton.vue'

export default {
	components: {
		AnimButton,
	},
	methods: {
		submit: function() {
			console.log('submit')
		},
}
</script>

Answer 1

您可以像评论中建议的那样使用@click.native (see here) 或将@click 放入您的AnimButton、$emit 某个事件中并在父组件中捕获此事件。