Vue.js 2 Design Patterns and Best Practices

Sending event values

To make the event system even more powerful, we can also pass values along to our other component. Let's add an input box to our FancyButton component (perhaps we need to rename it or think about separating the input into its own component!):

<template> <div>  <input type="text" v-model="message">  <button   @click.prevent="clicked()">   {{buttonText}}  </button> </div></template><script>export default { data() {  return {   message: ''  }; }, // Omitted}

The next thing to do is pass along the message value with our $emit call. We can do this inside of the clicked method like so:

 methods: {  clicked() {   this.$emit('buttonClicked', this.message);  } }

At this point, we can then capture the event as an argument to the eventListener ...