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

您都可以像评论（see here）中所建议的那样使用@click.native或将@click放入您的 AnimButton 中，$emit进行一些事件并捕获此事件在父组件中。