6

I am familiar with emitting data via bus on events and these work great but now I want to emit something but I don't have an event to tie it to.

I've tried to emit it on mounted but that hasn't worked as below:

mounted(){
  bus.$emit('send-test', this.test);
},
kissu
  • 40,416
  • 14
  • 65
  • 133
Clinton Green
  • 9,697
  • 21
  • 68
  • 103
  • 1
    How is it not working? This should work fine. – Bert Jun 02 '17 at 00:10
  • 1
    I suspect you can't emit on mounted because you need an event? it works fine if I attach it to an event in watch. – Clinton Green Jun 02 '17 at 01:11
  • 1
    You can emit on mounted. https://codepen.io/Kradek/pen/eROrWM?editors=1010 – Bert Jun 02 '17 at 01:12
  • That is odd. The data I need to emit is actually from a computed property. Could it be that isn't available at mounted? – Clinton Green Jun 02 '17 at 01:15
  • 1
    Computed values are available in mounted. https://codepen.io/Kradek/pen/eROrWM?editors=1010 – Bert Jun 02 '17 at 01:17
  • This is very odd, it seems that in this instance I am unable to emit from mounted. Do you have any clue what could cause that? – Clinton Green Jun 02 '17 at 01:27
  • Not really, without the code. – Bert Jun 02 '17 at 01:28
  • I think you'll see what I'm taking about here, https://codepen.io/anon/pen/bRbMjW?editors=1010 I used your example as a template. You should see 'hello world' on the page but it is not showing. – Clinton Green Jun 02 '17 at 01:59
  • Yeah, in that case, where the `$on` is added in the `mounted` it's added *after* the $emit has already occurred. Children mount before the parent. The $emit happens just fine. – Bert Jun 02 '17 at 02:04

2 Answers2

12

When you add an event handler in the parent's mounted lifecycle event for an event that is emitted in a child's mounted event, the handler will not catch the event emitted by the child because the handler is added after the child has already emitted the event. Basically the cycle of events is like this.

  1. Parent's create
  2. Child's create
  3. Child's mounted
  4. Parent's mounted

Obviously there are other lifecycle events that occur, but that's the sequence that matters in this case.

If you want to handle an event emitted in the child, you need to create the handler (call $on) before the child's mounted event.

Bert
  • 80,741
  • 17
  • 199
  • 164
  • @Bert would be you provide an example (to your last point)? I'm don't quite understand what you mean. – phil May 15 '18 at 15:55
  • @phil Essentially it's the point of the answer; the original question was why the parent doesn't catch the event emitted by the child when the parent was adding the handler to catch the event in the parent's mounted lifecycle handler. That point is *too late*. If you want to catch events emitted in the child's create or mounted lifecycle, you *must* add the handler in the parent's create lifecycle event. – Bert May 15 '18 at 16:07
  • You can meanwhile use `@hook:mounted` on the children, to know when it is actually mounted. As explained in this answer: https://stackoverflow.com/a/55080141/8816585 – kissu Aug 19 '21 at 10:10
11

$nextTick may also be useful, it solved one of my issues and can be used like this

async mounted() {
  await this.$nextTick()
  // Code that will run only after the entire view has been rendered
}
tony19
  • 125,647
  • 18
  • 229
  • 307
kissu
  • 40,416
  • 14
  • 65
  • 133