Vue 组件事件处理

Question

I have a component button where I use that button almost everywhere in my site.

Its an SVG button with some animation on hover. The button works fine.

 <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>

Now I wanna use this button as a submit button in my form.The hover events are happening, but seems the @click event is not triggering.

Probably i'm missing something bad.

 <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一些事件并在父组件中捕获此事件。