Advanced Vue.js Features
We have 2 components, where one is an ancestor of the other (not necessarily a
direct one), and we want to share some data between them. Normally, we’d have to
share it using
props going thorugh ALL the intermediate components, even if
they do not need this data - we’re just passing it through.
We can use provide-inject. In the ancestor, we specify the
property, and put the data we want to share into it. Then, in the other
component, we use
inject - it’s an array where we specify the data we want to
be injected - and it needs to be provided by some ancestor!
We can provide some data from the
data of our ancestor.
The same way we can share the events. Instead of passing the event through all the components in the middle, we can provide the handler, and inject it into the component that would normally emit the event. Insted of emiting it, it will invoke the handler.
Sometimes we’d like our components to display something in a different place in the HTML structure. I.e., a notification.
<teleport> component renders its content in the selected element (selected
to). In this case, the
div will be rendered inside of an element with id
The parameters of a route can be given as props. To do that, the route needs to have this option enabled, i.e.:
This way, the component does not need to rely on
this.$router for reading
parameters. Instead, it can use the
props as usually.
Vue incldes a
Transition component, which helps with animations when
entering/leaving the DOM (
v-show). It applies CSS classes as the
element appears in DOM, and another set of classes as the element disappears.
Other than that it applies a delay to
v-if so that the element does not
disappear right away, but rather only after an animation finishes execution.
It is especially useful for the LEAVE animation, because it is not possible to
do with CSS alone. Normally,
v-if would cause the element to disappear right
away. With transition, it does it after animation ends. Vue analyzes the classes
above to figure out the duration of the animation.
If the animated element does not appear/leave the DOM, CSS alone is enough.
The names of the classes can be fully customized.
transition should contain just one element in its slot. There is one exception
- we can have two elements, but ONLY if we can guarantee that at any given time only one of them is in the DOM. Example:
Only one button may be displayed depending on the value of
The ordr of animations may be controlled with
mode. It can be either
(firs elemnt appears, then the other disappears), or the opposite with
Without specifying mode, they transition at the same time.
For multiple items, like lists, there is a
Instead of using all three classes (
to), we can also use
active and utilize
animation based on
transition component emits events during various stages of the transition,
@before-enter. They are useful for controlling animations with JS instead
of CSS. If we want to use only JS, we can disable the CSS classes stuff with
:css="false" setting on the