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(请参阅此处)或@click放入AnimButton中，$emit某个事件并在父组件中捕获此事件。