Vue: Action event on loaded component Async

[joaoeudes7]

What problem does this feature solve?

Reference: https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

Current Issue: We do not know when the async component was loaded, with this, the 'Ref' is also not recognized in the 'mounted()' father

What does the proposed API look like?

Feature Request: Prop from 'created' in asynchronous component to go event

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000,
  created: () => something()
})

[yyx990803]

If something needs to happen after the component is loaded, it should be placed inside that component's own lifecycle hook. If that doesn't suit your use case you need to provide more context instead of a single sentence that I can barely understand.

[joaoeudes7]

Sorry about my English.
I meant that it has no way of knowing when an asynchronous component was loaded.
The parent component does not recognize the role or property of the child component in the mounted method because the child component is asynchronous.

Example:

<template>
  <div>
    <ChildAsync ref="child"/>
  </div>
</template>

<script>
export default {
  name: "Example",
  components: {
    ChildAsync: () => import("./childExample")
  },
  mounted() {
    const { test } = this.$route.query;
    if (test === 'ok') {
      this.$refs.child.someFunction(); // *ERROR* -> undefined
    }
  }
};
</script>

[yyx990803]

You can add a listener on the child component:

<ChildAsync @ready="doSomething"/>

Then in the child's mounted hook do this.$emit('ready')

[joaoeudes7]

All right, thank you!

[akccakcctw]

I found a cleaner way to do this (without modify child component):

<ChildAsync @hook:mounted="doSomething"/>