Vue.js 2 Design Patterns and Best Practices

Custom events

We're making great progress. We now have a component that can accept input, be registered globally or locally, has scoped styles, validation, and more. Now we need to give it the ability to fire events back to its parent component to communicate whenever the FancyButton button is clicked, this is done by editing the code for the $emit event:

<template> <button   @click.prevent="clicked">  {{buttonText}} </button></template><script>export default { props: {  buttonText: {   type: String,   default: () => {     return "Fancy Button!"    },   required: true,   validator: value => value.length > 3  } }, methods: {  clicked() {   this.$emit('buttonClicked');  } }}</script>

In our example, we've attached the clicked function to the click event of the button, ...