How to trigger events inside a component?

Question

Vue.js

Hello. Tell me please. How to trigger events inside a component. For example, we need to get focus on a text field by a button. This example works, but the focus( e ) method does not receive an Event object. As I understand it, only the method was called here, but how can you still call the event? Thanks
fiddle

Vue.component('myComp', {
  template: `
  <div>	
    <input ref='input'></button>
  </div>`  ,
  methods: {
    focus( e ) {
    	this.$refs.input.focus()
      console.log( 'focus', e )
    }
  },
})


new Vue({
  el: '#app',
  methods: {
    onClick() {
          //this.$refs.myComp.myFocus( );
          this.$refs.myComp.focus( );
        }
  },
  template: `
    <div>
      <myComp ref='myComp' />
      <button @click='onClick'>Click myComp</button>
    </div>`
})

Answer 1

You just call the method - where does the event object come from? You need to assign an appropriate handler to the element. Like so .