From 4f323ca603d35b7dfa36471b02ad34c4faaeda6d Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Mon, 15 Mar 2021 16:48:08 +0000 Subject: [PATCH 1/4] docs: explain how to use built-in components with both render and :is --- src/api/built-in-components.md | 39 ++++++++++++++++++++++++++++++++-- src/guide/render-function.md | 16 ++++++++++++++ 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index 8f79c04d04..a2ce361ec8 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -1,5 +1,21 @@ # Built-In Components +The built-in components can all be used directly in templates without needing to be registered. + +The ``, ``, ``, and `` components can all be tree-shaken by bundlers, so that they are only included in the build if they're used. They can also be imported explicitly if you need direct access to the component itself: + +```js +// CDN build of Vue +const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue +``` + +```js +// ESM build of Vue +import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' +``` + +`` and `` are component-like features of template syntax. They are not true components and they can't be imported like the components shown above. + ## component - **Props:** @@ -10,8 +26,6 @@ A "meta component" for rendering dynamic components. The actual component to render is determined by the `is` prop. An `is` prop as a string could be either an HTML tag name or a Component name. -- **Example:** - ```html @@ -27,6 +41,27 @@ ``` + The built-in components `KeepAlive`, `Transition`, `TransitionGroup`, and `Teleport` can all be passed to `is` but you must register them if you want to pass them by name. e.g.: + + ```js + const { Transition, TransitionGroup } = Vue + + const Component = { + components: { + Transition, + TransitionGroup + }, + + template: ` + + ... + + ` + } + ``` + + Registration is not required if you pass the component itself to `is` rather than its name. + - **See also:** [Dynamic Components](../guide/component-dynamic-async.html) ## transition diff --git a/src/guide/render-function.md b/src/guide/render-function.md index adfd00b9e8..327a25bf11 100644 --- a/src/guide/render-function.md +++ b/src/guide/render-function.md @@ -551,6 +551,22 @@ render () { [`resolveDirective`](/api/global-api.html#resolvedirective) is the same function that templates use internally to resolve directives by name. That is only necessary if you don't already have direct access to the directive's definition object. +### Built-in Components + +The [built-in components](/api/built-in-components.html) ``, ``, ``, and `` are not registered globally be default. This allows bundlers to perform tree-shaking, so that the components are only included in the build if they are used. However, that also means we can't access them using `resolveComponent` or `resolveDynamicComponent`. + +Templates have special handling for those components, automatically importing them when they are used. When we're writing our own `render` functions, we need to import them ourselves: + +```js +const { h, KeepAlive, Teleport, Transition, TransitionGroup } = Vue + +// ... + +render () { + return h(Transition, { mode: 'out-in' }, /* ... */) +} +``` + ## JSX If we're writing a lot of `render` functions, it might feel painful to write something like this: From 6937f82a17d9d8085f027c92217e038a02ef414f Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 19 Mar 2021 11:17:28 +0000 Subject: [PATCH 2/4] Update src/api/built-in-components.md Co-authored-by: Ben Hong --- src/api/built-in-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index a2ce361ec8..ac9e544da6 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -1,6 +1,6 @@ # Built-In Components -The built-in components can all be used directly in templates without needing to be registered. +Built-in components can be used directly in templates without needing to be registered. The ``, ``, ``, and `` components can all be tree-shaken by bundlers, so that they are only included in the build if they're used. They can also be imported explicitly if you need direct access to the component itself: From 7a0e79c2207e51a744e5b866b3c2b70099ea69a7 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 19 Mar 2021 15:47:13 +0000 Subject: [PATCH 3/4] Update src/api/built-in-components.md Co-authored-by: Ben Hong --- src/api/built-in-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index ac9e544da6..62e75b394f 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -41,7 +41,7 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' ``` - The built-in components `KeepAlive`, `Transition`, `TransitionGroup`, and `Teleport` can all be passed to `is` but you must register them if you want to pass them by name. e.g.: + The built-in components `KeepAlive`, `Transition`, `TransitionGroup`, and `Teleport` can all be passed to `is`, but you must register them if you want to pass them by name. For example: ```js const { Transition, TransitionGroup } = Vue From 4f7a757fff69802724f3c5d04da49ac8c8e33633 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 19 Mar 2021 16:59:32 +0000 Subject: [PATCH 4/4] Update src/guide/render-function.md Co-authored-by: Ben Hong --- src/guide/render-function.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/render-function.md b/src/guide/render-function.md index 327a25bf11..a5a17a7689 100644 --- a/src/guide/render-function.md +++ b/src/guide/render-function.md @@ -553,7 +553,7 @@ render () { ### Built-in Components -The [built-in components](/api/built-in-components.html) ``, ``, ``, and `` are not registered globally be default. This allows bundlers to perform tree-shaking, so that the components are only included in the build if they are used. However, that also means we can't access them using `resolveComponent` or `resolveDynamicComponent`. +[Built-in components](/api/built-in-components.html) such as ``, ``, ``, and `` are not registered globally by default. This allows bundlers to perform tree-shaking, so that the components are only included in the build if they are used. However, that also means we can't access them using `resolveComponent` or `resolveDynamicComponent`. Templates have special handling for those components, automatically importing them when they are used. When we're writing our own `render` functions, we need to import them ourselves: