Как в динамических асинхронных компонентах дожидаться полного монтирования компонента? button @click="setComponent" component

:is="componentName"

components: {
'MyComponent' => import('./MyComponent')
}

setComponent(){
this.componentName = 'MyComponent'
// и вот тут я хочу вызвать метод компонета через ref, но компонент с тому времени не загрузился или не смонтировался
// помогает только this.nextTick
this.$refs.MyComponent.method()
}

грязный подход сам по себе, дергать через реф

вопрос не в этом

только nextTick - грязному подходу грязное решение

но лучше из компонента который монтируете, бросить событие и в родительском компоненте среагировать на него - так будет канонично хотябы

Почему?

потому, что $ref для индивидуальных случаев работы напрямую с dom елментами, а не для вызова методов из дочерних

С асинхронными компонентами нарушается последовательность жизненного цикла ребенок - родитель. Когда родитель смаунтился - ребенок мог еще даже не начать. По этой причине, если это прям критично, можно в маунте ребенка эмтить событие в родителя, в этом родителе по рефу дергать ребенка и выполнять нужный код

Танцами с бубном попахивает)

Попробуй во все хуки проставить консоль логи, и вызвать сначала синхронно компонент, потом асинхронно. И увидеть разницу. При чем лучше дернуть задержку какую-нибудь

Я ни разу асинхронные компоненты не создавал даже и не знаю зачем. Надо бы восполнить этот пробел)

не очень понимаю как тогда правильно вызывать методы компонентов? Менять пропсы? Но иногода вот просто нечего менять. Придумать асбстрактную переменную, повесить на нее вотч и вызывать метод?

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

ивент бас это тоже нарушение нормального потока

Ну так это решение, для вашего нарушения)

через обмен событиями, не обязательно же делать вызов напрямую у функции: можно повесить слушателя на событие

а можно пример?

Я так понимаю речь про ивент бас?) или прокинуть пропсом объект по ссылке, способного эмитить?

в дочернем пишем this.$emit('myEvent', eventProps) в родителе пишем <component @v-on:myEvent="handlerFn" />

про event bus

вы понимаете что при таком подходе, как бы моодуль перестает быть модулем, потому что я выношу реализацию метода в родитель

Ну вы и так жестко связали модуль с родителем нарушив инкапсуляцию

с этим согласен

тебе выше конечно уже сказали, о еще раз повторю - это ОЧЕНЬ плохое поведение, антипаттерн и вообще)

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

То есть в моем случае заменить все прямые вызовы на евент бас?

ивент бас примерно так же плох как и вызов метода родителя

))))

что делает метод ребенка?

а хотя подожди, тут же ты дергаешь ребенка, а не родителя. тогда в принципе всё не так плохо. так делать можно, но не часто желательно

да по разному, так в двух словах и не опишешь

То есть если я удалю этот компонент, то и метод должен исчезнуть

именно, но типа прямой вызов это не гуд тоже, как я понял