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使用某个事件并在父组件中捕获这个事件。