<!-- 
приложение , которое использует наш компонент "universal-component". Компонент используется несколько раз и в каждом случае ведет себя по-разному

-->
<div id="components-demo">
<!-- этот компонент вызовет обработчик handler1  -->
 <universal-component @opa='handler1' param='param1' button-title='Кнопка №1'> </universal-component>
  
  <!-- этот компонент вызовет обработчик handler2  -->
 <universal-component @opa='handler2'  param='param2' button-title='Кнопка №2'></universal-component>
  
  <!-- этот компонент вызовет обработчик handler3  -->
 <universal-component @opa='handler3'  param='param3' button-title='Кнопка №3'></universal-component> 
   
</div>

//наш универсальный компонент
Vue.component("universal-component", {
  props: ["buttonTitle", "param"],
  data: () => {},
  // при клике компонент генерит событие "оpa". Обработчики этого события
  // могут быть различными. Кроме самого события компонент может отправлять какие-либо данные в обработчик. Здесь это "param"
  template: "<button @click=\"$emit('opa',param)\">{{buttonTitle}}</button>"
});

// приложение, которое использует наш компонент
new Vue({
  el: "#components-demo",
  methods: {
    // различные обработчики события "оpa" нашего компонента "universal-component"
    // в обработчиках мы можем получать параметры, отправленные из компонента
    // в данном примере это param
    handler1: (param) => alert("Обработчик 1 " + param),
    handler2: (param) => alert("Обработчик 2 " + param),
    handler3: (param) => alert("Обработчик 3, здесь мы получили " + param)
  }
});