Как опрокидывать события внутри компонента?

Question

[Богдан]

Здравствуйте. Подскажите пожалуйста. Как опрокидывать события внутри компонента. Например нам нужно по кнопке получить фокус на текстовом поле. В данном примере работает, но метод focus( e ) не получает объект Event. Я так понимаю, тут вызвался только метод, а как можно все-так событие вызвать? Спасибо

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

[0xD34F]

Вы же просто метод вызываете - откуда там взяться объекту события? Надо повесить на элемент соответствующий обработчик. Типа так.

Comments

[Богдан]

Спасибо, как на input словить события я вкурсе. А как на самом компоненте словить событие с объектом? Я понимаю что в моем примере был банальный вызов метода, а можно ли как-то вызвать кастомное событие на обьекте?

[0xD34F]

Богдан, извините, не понимаю, о чём вы говорите. Что значит "на самом компоненте"? О каком кастомном событии речь? - вроде бы только что фокус обсуждался.

[Богдан]

0xD34F, Спасибо, вот уже переделал пример. Под опрокидыванием свойств я подразумевал

this.$el.addEventListener('click', e => this.$refs.button.click())
 	   document.getElementById( 'miId').click();

Такое можно реализовать на Vue, без нативного js, как в моем примере?

fiddle

console.clear()

Vue.component('myComp', {
  template: `
  <div>	
    <button @click='onClick' ref='button'>Child</button>
    <pre> {{clicks}} </pre>
  </div>`,
  
  methods: {
    onClick(e) {
    	this.clicks.push('1')
    }
  },
  mounted() {
    this.$el.addEventListener('click', e => this.$refs.button.click())
  },
  data() { return { clicks: [] }}
})


new Vue({
  el: '#app',
  methods: {
		onClick(e) {
 	   document.getElementById( 'miId').click();
 		}
  },
  template: `
    <div>
          <button @click='onClick'>Click child button</button>
			<myComp ref='myComp' :id="'miId'" />

    </div>`
})

[0xD34F]

Не уверен, что правильно вас понял - вы хотите, чтобы экземпляр дочернего компонента в целом был кликабельным? Тогда вешайте обработчик клика на его корневой элемент, а кнопка не нужна. Типа так.

[0xD34F]

Или вы хотите просто кидать события из родительского компонента в дочерний? Если да - так не делают, есть же параметры, изменяете в родителе значение, а в дочернем компоненте делаете watch. Впрочем, если очень хочется - можете воспользоваться шиной событий.