Add async/teleport components and provide/inject

pull/1453/head
Kamran Ahmed 2 years ago
parent 503a5f793c
commit c95ed6400e
  1. 7
      content/roadmaps/105-vue/content/101-advanced-topics/107-async-components.md
  2. 7
      content/roadmaps/105-vue/content/101-advanced-topics/108-teleport-components.md
  3. 8
      content/roadmaps/105-vue/content/101-advanced-topics/109-provide-inject.md

@ -1 +1,6 @@
# Async components
# Async Components
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a `defineAsyncComponent` function.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/async.html'>Async Components</BadgeLink>

@ -1 +1,6 @@
# Teleport components
# Teleport Components
Sometimes we may run into the following scenario: a part of a component's template belongs to it logically, but from a visual standpoint, it should be displayed somewhere else in the DOM, outside of the Vue application. This is where the `<Teleport>` component comes in.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/built-ins/teleport.html'>Teleport Components</BadgeLink>

@ -1 +1,7 @@
# Provide inject
# Provide / Inject
Usually, when we need to pass data from the parent to a child component, we use props. However, imagine the case where we have a large component tree, and a deeply nested component needs something from a distant ancestor component. With only props, we would have to pass the same prop across the entire parent chain. We can solve props drilling with `provide` and `inject`.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/provide-inject.html'>Provide / Inject in Vue.js</BadgeLink>

Loading…
Cancel
Save