I am currently re-rendering Child components within a Parent component based on a state change and I need to know when the child component has completely mounted and re-rendered on screen. Here's a quasi-example:
<Parent>
{ this.state.showChild1 ? <Child1/> : <Child2/> }
</Parent>
The general procedure for responding after state change would be using componentDidUpdate(prevProps, prevState) however, this lifecycle event only fires after state has updated without considering the effects of what the state change would update within the <Parent> component.
The problem I'm encountering then is that although state has completely updated, the new Child component is not yet available because it hasn't actually finished re-rendering yet. Is there a way to check when the Child components have re-rendered?
You could pass a callback into the component (sth like isMounted()) and call it in the child in the componentDidMount and componentDidUpdate lifecycle hook.
If you need this with arbitrary components you could iterate over them with React.Children.map(see docs) and add the lifecycle hooks on the fly (this is a bit error prone and you would need to have class components)
Related
I currently have the following problem with nested <router-view>s in my app and I want to know if this is even the right way to do it.
I have a navigation.vue route component with child routes configured in the router.
In this component, I have multiple <router-view>s (in a v-for loop).
Every router-view has its own link and if you click on it, the clicked container which holds the router-view will start a transition and reveal the content (the page.vue component).
To fire the transition before confirming the navigation, I listen for the beforeRouteUpdate() hook.
However, I now want to add other navigation components inside this navigation, so that I have something like that:
<navigation>
<page/>
<page/>
<navigation>
<page/>
<page/>
</navigation>
<page/>
</navigation>
The hook to open the sub-navigation seems to work - but if I try to open a page on the second level, the navigation component can't get the $refs that belong to itself. I see the beforeRouteUpdate() hook of the first level navigation being called. I think that's to be expected because it's still in the background, holding the second level navigation and its pages.
What can I do to only use the functionality of the second level navigation when it's opened?
Should I make some checks in the beforeRouteUpdate() hook, and are they both fired?
I'm probably confused because I don't know if the component is being reused or something - in my understanding it should be a second instance of the component.
I'm also using <keep-alive> around the <router-view>s - so if that's a problem and things work differently with that, I'd also be glad to get a hint.
Thanks!
I’m not sure if this will fix your problem but in this vue school video they talk about the Vue Router not always picking up on changes if the same component is being used. You can handle it by adding a key to the router-view like <router-view :key=“$route.path” />. Then any change to the path will trigger a reload of the component. Maybe you can experiment with adding keys to your nested <router-view>s?
I solved it this way:
Both beforeRouteUpdate() hooks are called, so I had to make sure which of the existing navigations should do the work. The upper level navigations skip the hook.
I also needed some checks to only render the navigation in the <router-view> if it is in the $route.match array of the current route.
I am learning Vue and my doubt is about the structure of my Vue app.
I learnt that the components can include both logic and template. Then I separated my components and everyone is getting the config from the main app (config is an object with the coordinates config.ll, config.lng).
I do the ajax call to my search-and-discovery API service and I display the results inside each components (current location, venues-near-you etc).
My question is: is it correct to encapsulate the calls into each components? Or is it better to get the needed data inside the general app and then share the results with the components using pros?
I am asking that because the hard part is starting now when I want to communicate the click of a category to the venuesNearYou component, I tried to use the emit without success.
//MAIN
<sidebar :config="config"></sidebar>
<content :config="config"></content>
//IN SIDEBAR
<currentLocation :config="config"></currentLocation>
<categories :config="config"></categories>
//IN CONTENT
<venueDetails :config="config"></venueDetails>
<venuesNearYou :config="config"></venuesNearYou>
I think you could use event Bus like approach
we have three type of communication in vue app (without vuex)
Parent to child communication which is full field by props
child to parent communication handle by custom event from child which is listen by parent
communication between non parent child component in which we use event bus approach
Parent to child example
Child to parent example
In child this.$emit('sendDataToParent',{someData:"some data"}})
in parent
<child-component :somedata="dataToChild" #sendDataToParent="'gotsomedata from parent'">
Event Bus
in main vue instance
const eventBus = new Vue()
in some component from where to send data
import eventBus
eventBus.$emit('someEvent','some data')
in some component from where to receive data
created() {
// register listener
eventBus.$on('someEvent',()=>{
})
}
For more reference
https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
https://v2.vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event
https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1
It's hard to help you around emitting an event since you didn't provide much of a code. But check Vuex. It serves as a centralized store for all the components in Vue application.
What order are child components created and mounted in? I know that the lifecycle for a single component is documented here, but I couldn't find anything that described when children were created and mounted.
For example, what is the creation and mounting order for the following component?
<template>
<div class='parent'>
<child-1/>
<child-2/>
<child-3/>
</div>
</template>
I found this article to be especially helpful in explaining the order of parent/child lifecycle hooks execution. This diagram in particular offers a nice summary of the process.
Also have a look at this post by LinusBorg on the vuejs forum.
beforeCreate() and created() of the parent run first.
Then the parent’s template is being rendered, which means the child components get created.
so now the children’s beforeCreate() and created() hooks execute respectively.
these child components mount to DOM elements, which calls their beforeMount() and mounted() hooks.
and only then, after the parent’s template has finished, can the parent be mounted to the DOM, so finally the parent’s beforeMount() and mounted() hooks are called.
In Vue 3, the lifecycle hook execution order can be found in a part of its tests.
The rule of thumb is: with the exception of created hooks (which are now replaced by setup()), all hooks prefixed with before executes top-down (parent run first) while the "after" hooks execute bottom-up (children run first).
Both beforeCreated and created hooks execute top-down, however (as a child can only be created after the parent renders).
As the first response give a good view of the creation/mounting process it fails to respond for the destruction process.
here is what happen :
app created
// we add the parent
parent Created
child Created
child Mounted
parent Mounted
// now we remove the parent :
parent ready to unmount
child ready to unmount
child unMounted
parent unMounted
PS : beware that beforeDestroy & destroyed in Vue 2 became beforeUnmounted & unMounted un Vue 3
I have a simple component hierarchy, in which there is one parent component, which contains the following template <div><component :is="current"></component></div> and two child components, which are dynamically 'switched' out, via the value of current.
The logic for the 'switching' of components is being handled in the parent component. However, when I try to execute a method in the second child component (in response to an event emitted from the first child component, being listened to in the parent component, and altering the value of current in the parent component) through the mounted lifecycle hook, the expected result is not observed.
Essentially, I cannot find a decent way of invoking a child component's methods when that component is 'switched' in as the current component in the parent component.
I have realistically looked at using the $refs and $childrenproperties on the instance, but these do not seem to be of any assistance. I have also reasoned using the event system. I usually 'define' an event listener in the mounted lifecycle hook, however, I refer to the 'issue' of using the lifecycle hooks
What is the usual approach to this situation?
There are two options that immediately come to mind for child components invoking methods on being the "current" child component:
1) Using the mounted lifecycle hook. In order for this to work, you must be using v-if in order to conditionally display the child component, otherwise the child component will not trigger the mounted lifecycle hook. Otherwise, if you're using v-show or some other mechanism for conditionally displaying the child component, the mounted hook will only ever trigger once.
2) Using watched properties. In lieu of the above, you could do something like the following:
<child-component :target_prop="current"></child-component>
Vue.component('child-component', {
. . .,
props: ['target_prop'],
watch: {
target_prop: function() {
if(this.target_prop == your_expected_value) {
//execute the desired method for this component
}
}
}
});
This is, of course, just a proof-of-concept example and there are plenty of alternative ways to use the watched properties to your advantage.
I've also heard of using a "bus" to handle inter-component communication, but I don't believe it would be any better than the above two solutions (and is arguably worse).
Personally, I prefer the mounted lifecycle hook approach, though there's the caveat that any "settings" or data in your child components will be lost on switching between them (although you could also emit a settings object on destruction and store/restore those settings as needed, but that could get messy). You'll have to make the final judgment on which approach better suits your needs and which consequences you're more comfortable dealing with.
There is an official react-native example regarding routing which uses props instead of state.
However all other router component libraries use state instead of props. Especially, the libraries that have prepared for Flux and Redux usages.
What is the main idea of state usage in router components?
The reason why they use navigator=this.props.navigator in this example is that this is a child component, where a parent component is passing down its navigator to the child through props. You generally do not pass down state directly into a child component, you pass down a prop that could be used in "getInitialState".
https://facebook.github.io/react/tips/communicate-between-components.html
Here we see that this is simply the syntax used to pass a prop from parent to child. We want to pass the navigator between different components so that the app is consistent, they are all using the same navigator to navigate between different pages.
Just a warning though, when passing props as state to a child component, note it should be clear that it's only for initialization.