From d558339e38480823f9f8a1604169bcf287fa146b Mon Sep 17 00:00:00 2001 From: Santiago Petrone Date: Mon, 9 Dec 2024 08:26:03 -0300 Subject: [PATCH 1/3] fix: typo in reactivity-fundamentals.md (#3118) --- src/guide/essentials/reactivity-fundamentals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/essentials/reactivity-fundamentals.md b/src/guide/essentials/reactivity-fundamentals.md index 47e6e20f6e..ee38d11a77 100644 --- a/src/guide/essentials/reactivity-fundamentals.md +++ b/src/guide/essentials/reactivity-fundamentals.md @@ -467,7 +467,7 @@ Due to these limitations, we recommend using `ref()` as the primary API for decl ### As Reactive Object Property \*\* {#ref-unwrapping-as-reactive-object-property} -A ref is automatically unwrapped when accessed or mutated as a property of a reactive object. In other words, it behaves like a normal property : +A ref is automatically unwrapped when accessed or mutated as a property of a reactive object. In other words, it behaves like a normal property: ```js const count = ref(0) From fd997b59a669ed7568a85667604641b73600eb51 Mon Sep 17 00:00:00 2001 From: Prof Darrel Francis <20881844+darrelfrancis@users.noreply.github.com> Date: Mon, 9 Dec 2024 11:25:40 +0000 Subject: [PATCH 2/3] Update teleport.md (#3122) 1. Removed the implication that teleport is focussed on displaying the element _outside the Vue application_. The real focus is on displaying outside the original component. 2. Improved grammar generally and reduced unnecessary words. --- src/guide/built-ins/teleport.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/guide/built-ins/teleport.md b/src/guide/built-ins/teleport.md index e63ec654eb..5cd6a53163 100644 --- a/src/guide/built-ins/teleport.md +++ b/src/guide/built-ins/teleport.md @@ -6,9 +6,9 @@ ## Basic Usage {#basic-usage} -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. +Sometimes 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, perhaps even outside of the Vue application. -The most common example of this is when building a full-screen modal. Ideally, we want the modal's button and the modal itself to live within the same component, since they are both related to the open / close state of the modal. But that means the modal will be rendered alongside the button, deeply nested in the application's DOM hierarchy. This can create some tricky issues when positioning the modal via CSS. +The most common example of this is when building a full-screen modal. Ideally, we want the code for the modal's button and the modal itself to be written within the same single-file component, since they are both related to the open / close state of the modal. But that means the modal will be rendered alongside the button, deeply nested in the application's DOM hierarchy. This can create some tricky issues when positioning the modal via CSS. Consider the following HTML structure. @@ -169,11 +169,11 @@ In some cases, we may want to conditionally disable ``. For example, w ``` -Where the `isMobile` state can be dynamically updated by detecting media query changes. +We could then dynamically update `isMobile`. ## Multiple Teleports on the Same Target {#multiple-teleports-on-the-same-target} -A common use case would be a reusable `` component, with the potential for multiple instances to be active at the same time. For this kind of scenario, multiple `` components can mount their content to the same target element. The order will be a simple append - later mounts will be located after earlier ones within the target element. +A common use case would be a reusable `` component, with the potential for multiple instances to be active at the same time. For this kind of scenario, multiple `` components can mount their content to the same target element. The order will be a simple append, with later mounts located after earlier ones, but all within the target element. Given the following usage: From 39dd8c70a19b7f2ec8526db338cdd6ad7f92c4d4 Mon Sep 17 00:00:00 2001 From: alexchexes Date: Mon, 9 Dec 2024 11:23:08 +0000 Subject: [PATCH 3/3] docs(guide/components/slots): clarify slot presence phrasing (#3124) * docs(guide/components/slots): clarify slot presence phrasing The original phrasing "whether or not a slot is present" was potentially misleading, as it suggested checking the existence of the slot itself rather than whether content was passed to it. Updated the explanation to clarify this distinction for better readability and accuracy. * docs(guide/components/slots): clarify slot presence phrasing (2) The phrase "When the header/footer/default is present..." could be interpreted as referring to the slot's definition, rather than whether content is provided for the slot --- src/guide/components/slots.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/components/slots.md b/src/guide/components/slots.md index d3dfe83771..b50855cdf6 100644 --- a/src/guide/components/slots.md +++ b/src/guide/components/slots.md @@ -298,12 +298,12 @@ function BaseLayout(slots) { ## Conditional Slots {#conditional-slots} -Sometimes you want to render something based on whether or not a slot is present. +Sometimes you want to render something based on whether or not content has been passed to a slot. You can use the [$slots](/api/component-instance.html#slots) property in combination with a [v-if](/guide/essentials/conditional.html#v-if) to achieve this. In the example below we define a Card component with three conditional slots: `header`, `footer` and the `default` one. -When the header / footer / default is present we want to wrap them to provide additional styling: +When content for the header / footer / default is present, we want to wrap it to provide additional styling: ```vue-html