Vue2: send event from component to parent

by Eugene Manager

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  {{text}}
  <my-component></my-component>
</div>

JavaScript

Vue.component('my-component', {
  template: '<button @click="click">Click me</button>',
  methods: {
  	click() {
    	this.$root.$emit('send', 'bye')
    }
  }
})


new Vue({
  el: "#app",
  data: {
    text: "hello"
  },
  created() {
    this.$root.$on('send', (text) => {
    	this.text = text;
    })
  }
})