From 50d2a819e9dca082af6099a515036d3dbb64a74d Mon Sep 17 00:00:00 2001 From: Matheus Felipe Date: Fri, 14 Oct 2022 04:12:28 -0300 Subject: [PATCH 001/446] fix: Typo in Typescript tip (#2013) Fix a typo within Tip example in Typescript configuration file. --- src/guide/scaling-up/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/scaling-up/testing.md b/src/guide/scaling-up/testing.md index be29a991..4414cecc 100644 --- a/src/guide/scaling-up/testing.md +++ b/src/guide/scaling-up/testing.md @@ -310,7 +310,7 @@ If you are using TypeScript, add `vitest/globals` to the `types` field in your ` // tsconfig.json { - "compileroptions": { + "compilerOptions": { "types": ["vitest/globals"] } } From 9f7b190b56bc1ad9f57aca28ef502f086ff8d079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C4=B0sa=20Sar=C4=B1?= <99514353+devisasari@users.noreply.github.com> Date: Sat, 15 Oct 2022 08:39:45 +0300 Subject: [PATCH 002/446] Fix typo guide components (#2017) * fix typo * fix typo --- src/guide/components/async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/components/async.md b/src/guide/components/async.md index ebd89022..cc06ed1a 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -110,4 +110,4 @@ If an error component is provided, it will be displayed when the Promise returne ## Using with Suspense -Async components can be used with the `` built-in component. The interaction between `` and async components are documented in the [dedicated chapter for ``](/guide/built-ins/suspense.html). +Async components can be used with the `` built-in component. The interaction between `` and async components is documented in the [dedicated chapter for ``](/guide/built-ins/suspense.html). From 72b203380bda37f83cbcf31805f969d67b7b0214 Mon Sep 17 00:00:00 2001 From: Zhousg Date: Sat, 15 Oct 2022 23:48:07 +0800 Subject: [PATCH 003/446] fix: typo v-bind CSS (#2023) --- src/api/utility-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/utility-types.md b/src/api/utility-types.md index a55bcd95..5008da73 100644 --- a/src/api/utility-types.md +++ b/src/api/utility-types.md @@ -130,7 +130,7 @@ Used to augment allowed values in style property bindings. ::: :::info See also -SFC ` @@ -275,8 +41,9 @@ html:not(.banner-dismissed) { font-size: 12px; font-weight: 600; color: #fff; - background: -webkit-linear-gradient(315deg, #96c93c 25%, #03b19a); + background-color: var(--vt-c-green); } + .banner-dismissed .banner { display: none; } diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 171dd6a6..dead8883 100644 --- a/.vitepress/theme/index.ts +++ b/.vitepress/theme/index.ts @@ -10,13 +10,13 @@ import { import SponsorsAside from './components/SponsorsAside.vue' import VueJobs from './components/VueJobs.vue' import VueSchoolLink from './components/VueSchoolLink.vue' -import Banner from './components/Banner.vue' +// import Banner from './components/Banner.vue' export default Object.assign({}, VPTheme, { Layout: () => { // @ts-ignore return h(VPTheme.Layout, null, { - banner: () => h(Banner), + // banner: () => h(Banner), 'sidebar-top': () => h(PreferenceSwitch), 'aside-mid': () => h(SponsorsAside) }) From 3b746085d694be0ee1a3638894989156e565d182 Mon Sep 17 00:00:00 2001 From: Sebastian Klocke Date: Thu, 3 Nov 2022 19:31:00 +0100 Subject: [PATCH 016/446] Update reactivity-fundamentals.md (#2046) Fixed the nesting of "Ref Unwrapping in Arrays and Collections", it was depth 4, should be depth 3 --- 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 a451a2d2..46dd5a8f 100644 --- a/src/guide/essentials/reactivity-fundamentals.md +++ b/src/guide/essentials/reactivity-fundamentals.md @@ -514,7 +514,7 @@ console.log(count.value) // 1 Ref unwrapping only happens when nested inside a deep reactive object. It does not apply when it is accessed as a property of a [shallow reactive object](/api/reactivity-advanced.html#shallowreactive). -#### Ref Unwrapping in Arrays and Collections +### Ref Unwrapping in Arrays and Collections Unlike reactive objects, there is no unwrapping performed when the ref is accessed as an element of a reactive array or a native collection type like `Map`: From 7826a0167ef1236a3aadf2c24c0587935e853da1 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 4 Nov 2022 09:52:48 +0000 Subject: [PATCH 017/446] Explain attribute inheritance for functional components (#2058) --- src/guide/extras/render-function.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md index d98ddd8f..8551d680 100644 --- a/src/guide/extras/render-function.md +++ b/src/guide/extras/render-function.md @@ -687,4 +687,10 @@ MyComponent.emits = ['click'] If the `props` option is not specified, then the `props` object passed to the function will contain all attributes, the same as `attrs`. The prop names will not be normalized to camelCase unless the `props` option is specified. +For functional components with explicit `props`, [attribute fallthrough](/guide/components/attrs.html) works much the same as with normal components. However, for functional components that don't explicitly specify their `props`, only the `class`, `style`, and `onXxx` event listeners will be inherited from the `attrs` by default. In either case, `inheritAttrs` can be set to `false` to disable attribute inheritance: + +```js +MyComponent.inheritAttrs = false +``` + Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to `h()`, it will be treated as a functional component. From 21eb38482e327591711edaa69e82343f4305f45b Mon Sep 17 00:00:00 2001 From: Zhousg Date: Sat, 5 Nov 2022 09:08:31 +0800 Subject: [PATCH 018/446] fix: add vs dot unified writing paradigm (#1999) --- src/guide/essentials/computed.md | 2 +- src/guide/essentials/conditional.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md index bc8a61df..7c62f387 100644 --- a/src/guide/essentials/computed.md +++ b/src/guide/essentials/computed.md @@ -138,7 +138,7 @@ See also: [Typing Computed](/guide/typescript/composition-api.html#typing-comput -## Computed Caching vs Methods +## Computed Caching vs. Methods You may have noticed we can achieve the same result by invoking a method in the expression: diff --git a/src/guide/essentials/conditional.md b/src/guide/essentials/conditional.md index 729fc911..98a1202f 100644 --- a/src/guide/essentials/conditional.md +++ b/src/guide/essentials/conditional.md @@ -98,7 +98,7 @@ The difference is that an element with `v-show` will always be rendered and rema `v-show` doesn't support the ` ``` -## onUpdated() +## onUpdated() {#onupdated} Registers a callback to be called after the component has updated its DOM tree due to a reactive state change. @@ -89,7 +89,7 @@ Registers a callback to be called after the component has updated its DOM tree d ``` -## onUnmounted() +## onUnmounted() {#onunmounted} Registers a callback to be called after the component has been unmounted. @@ -128,7 +128,7 @@ Registers a callback to be called after the component has been unmounted. ``` -## onBeforeMount() +## onBeforeMount() {#onbeforemount} Registers a hook to be called right before the component is to be mounted. @@ -144,7 +144,7 @@ Registers a hook to be called right before the component is to be mounted. **This hook is not called during server-side rendering.** -## onBeforeUpdate() +## onBeforeUpdate() {#onbeforeupdate} Registers a hook to be called right before the component is about to update its DOM tree due to a reactive state change. @@ -160,7 +160,7 @@ Registers a hook to be called right before the component is about to update its **This hook is not called during server-side rendering.** -## onBeforeUnmount() +## onBeforeUnmount() {#onbeforeunmount} Registers a hook to be called right before a component instance is to be unmounted. @@ -176,7 +176,7 @@ Registers a hook to be called right before a component instance is to be unmount **This hook is not called during server-side rendering.** -## onErrorCaptured() +## onErrorCaptured() {#onerrorcaptured} Registers a hook to be called when an error propagating from a descendant component has been captured. @@ -220,7 +220,7 @@ Registers a hook to be called when an error propagating from a descendant compon - An `errorCaptured` hook can return `false` to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured` hooks or `app.config.errorHandler` from being invoked for this error. -## onRenderTracked() +## onRenderTracked() {#onrendertracked} Registers a debug hook to be called when a reactive dependency has been tracked by the component's render effect. @@ -243,7 +243,7 @@ Registers a debug hook to be called when a reactive dependency has been tracked - **See also:** [Reactivity in Depth](/guide/extras/reactivity-in-depth.html) -## onRenderTriggered() +## onRenderTriggered() {#onrendertriggered} Registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run. @@ -269,7 +269,7 @@ Registers a debug hook to be called when a reactive dependency triggers the comp - **See also:** [Reactivity in Depth](/guide/extras/reactivity-in-depth.html) -## onActivated() +## onActivated() {#onactivated} Registers a callback to be called after the component instance is inserted into the DOM as part of a tree cached by [``](/api/built-in-components.html#keepalive). @@ -283,7 +283,7 @@ Registers a callback to be called after the component instance is inserted into - **See also:** [Guide - Lifecycle of Cached Instance](/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance) -## onDeactivated() +## onDeactivated() {#ondeactivated} Registers a callback to be called after the component instance is removed from the DOM as part of a tree cached by [``](/api/built-in-components.html#keepalive). @@ -297,7 +297,7 @@ Registers a callback to be called after the component instance is removed from t - **See also:** [Guide - Lifecycle of Cached Instance](/guide/built-ins/keep-alive.html#lifecycle-of-cached-instance) -## onServerPrefetch() +## onServerPrefetch() {#onserverprefetch} Registers an async function to be resolved before the component instance is to be rendered on the server. diff --git a/src/api/composition-api-setup.md b/src/api/composition-api-setup.md index 9c21c05a..15c4f254 100644 --- a/src/api/composition-api-setup.md +++ b/src/api/composition-api-setup.md @@ -1,4 +1,4 @@ -# Composition API: setup() +# Composition API: setup() {#composition-api-setup} :::info Note This page documents the usage of the `setup` component option. If you are using Composition API with Single-File Components, [` ``` -## defineProps() & defineEmits() +## defineProps() & defineEmits() {#defineprops-defineemits} To declare options like `props` and `emits` with full type inference support, we can use the `defineProps` and `defineEmits` APIs, which are automatically available inside ` ``` -## Top-level `await` +## Top-level `await` {#top-level-await} Top-level `await` can be used inside ` -# KeepAlive +# KeepAlive {#keepalive} `` is a built-in component that allows us to conditionally cache component instances when dynamically switching between multiple components. -## Basic Usage +## Basic Usage {#basic-usage} In the Component Basics chapter, we introduced the syntax for [Dynamic Components](/guide/essentials/component-basics.html#dynamic-components), using the `` special element: @@ -50,7 +50,7 @@ Now, the state will be persisted across component switches: When used in [DOM templates](/guide/essentials/component-basics.html#dom-template-parsing-caveats), it should be referenced as ``. ::: -## Include / Exclude +## Include / Exclude {#include-exclude} By default, `` will cache any component instance inside. We can customize this behavior via the `include` and `exclude` props. Both props can be a comma-delimited string, a `RegExp`, or an array containing either types: @@ -77,7 +77,7 @@ The match is checked against the component's [`name`](/api/options-misc.html#nam Since version 3.2.34, a single-file component using ` -# TransitionGroup +# TransitionGroup {#transitiongroup} `` is a built-in component designed for animating the insertion, removal, and order change of elements or components that are rendered in a list. -## Differences from `` +## Differences from `` {#differences-from-transition} `` supports the same props, CSS transition classes, and JavaScript hook listeners as ``, with the following differences: @@ -24,7 +24,7 @@ import ListStagger from './transition-demos/ListStagger.vue' When used in [DOM templates](/guide/essentials/component-basics.html#dom-template-parsing-caveats), it should be referenced as ``. ::: -## Enter / Leave Transitions +## Enter / Leave Transitions {#enter-leave-transitions} Here is an example of applying enter / leave transitions to a `v-for` list using ``: @@ -50,7 +50,7 @@ Here is an example of applying enter / leave transitions to a `v-for` list using -## Move Transitions +## Move Transitions {#move-transitions} The above demo has some obvious flaws: when an item is inserted or removed, its surrounding items instantly "jump" into place instead of moving smoothly. We can fix this by adding a few additional CSS rules: @@ -80,7 +80,7 @@ Now it looks much better - even animating smoothly when the whole list is shuffl [Full Example](/examples/#list-transition) -## Staggering List Transitions +## Staggering List Transitions {#staggering-list-transitions} By communicating with JavaScript transitions through data attributes, it's also possible to stagger transitions in a list. First, we render the index of an item as a data attribute on the DOM element: diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md index ada2dc43..99f4d904 100644 --- a/src/guide/built-ins/transition.md +++ b/src/guide/built-ins/transition.md @@ -8,7 +8,7 @@ import BetweenElements from './transition-demos/BetweenElements.vue' import BetweenComponents from './transition-demos/BetweenComponents.vue' -# Transition +# Transition {#transition} Vue offers two built-in components that can help work with transitions and animations in response to changing state: @@ -18,7 +18,7 @@ Vue offers two built-in components that can help work with transitions and anima Aside from these two components, we can also apply animations in Vue using other techniques such as toggling CSS classes or state-driven animations via style bindings. These additional techniques are covered in the [Animation Techniques](/guide/extras/animation.html) chapter. -## The `` Component +## The `` Component {#the-transition-component} `` is a built-in component: this means it is available in any component's template without having to register it. It can be used to apply enter and leave animations on elements or components passed to it via its default slot. The enter or leave can be triggered by one of the following: @@ -73,9 +73,9 @@ When an element in a `` component is inserted or removed, this is wh 3. If no CSS transitions / animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed on the browser's next animation frame. -## CSS-Based Transitions +## CSS-Based Transitions {#css-based-transitions} -### Transition Classes +### Transition Classes {#transition-classes} There are six classes applied for enter / leave transitions. @@ -97,7 +97,7 @@ There are six classes applied for enter / leave transitions. `v-enter-active` and `v-leave-active` give us the ability to specify different easing curves for enter / leave transitions, which we'll see an example of in the following sections. -### Named Transitions +### Named Transitions {#named-transitions} A transition can be named via the `name` prop: @@ -121,7 +121,7 @@ For a named transition, its transition classes will be prefixed with its name in } ``` -### CSS Transitions +### CSS Transitions {#css-transitions} `` is most commonly used in combination with [native CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions), as seen in the basic example above. The `transition` CSS property is a shorthand that allows us to specify multiple aspects of a transition, including properties that should be animated, duration of the transition, and [easing curves](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). @@ -166,7 +166,7 @@ Here is a more advanced example that transitions multiple properties, with diffe -### CSS Animations +### CSS Animations {#css-animations} [Native CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) are applied in the same way as CSS transitions, with the difference being that `*-enter-from` is not removed immediately after the element is inserted, but on an `animationend` event. @@ -213,7 +213,7 @@ For most CSS animations, we can simply declare them under the `*-enter-active` a -### Custom Transition Classes +### Custom Transition Classes {#custom-transition-classes} You can also specify custom transition classes by passing the following props to ``: @@ -248,7 +248,7 @@ These will override the conventional class names. This is especially useful when -### Using Transitions and Animations Together +### Using Transitions and Animations Together {#using-transitions-and-animations-together} Vue needs to attach event listeners in order to know when a transition has ended. It can either be `transitionend` or `animationend`, depending on the type of CSS rules applied. If you are only using one or the other, Vue can automatically detect the correct type. @@ -258,7 +258,7 @@ However, in some cases you may want to have both on the same element, for exampl ... ``` -### Nested Transitions and Explicit Transition Durations +### Nested Transitions and Explicit Transition Durations {#nested-transitions-and-explicit-transition-durations} Although the transition classes are only applied to the direct child element in ``, we can transition nested elements using nested CSS selectors: @@ -315,7 +315,7 @@ If necessary, you can also specify separate values for enter and leave durations ... ``` -### Performance Considerations +### Performance Considerations {#performance-considerations} You may notice that the animations shown above are mostly using properties like `transform` and `opacity`. These properties are efficient to animate because: @@ -325,7 +325,7 @@ You may notice that the animations shown above are mostly using properties like In comparison, properties like `height` or `margin` will trigger CSS layout, so they are much more expensive to animate, and should be used with caution. We can check resources like [CSS-Triggers](https://csstriggers.com/) to see which properties will trigger layout if we animate them. -## JavaScript Hooks +## JavaScript Hooks {#javascript-hooks} You can hook into the transition process with JavaScript by listening to events on the `` component: @@ -460,7 +460,7 @@ Here's a demo using the [GreenSock library](https://greensock.com/) to perform t -## Reusable Transitions +## Reusable Transitions {#reusable-transitions} Transitions can be reused through Vue's component system. To create a reusable transition, we can create a component that wraps the `` component and passes down the slot content: @@ -497,7 +497,7 @@ Now `MyTransition` can be imported and used just like the built-in version: ``` -## Transition on Appear +## Transition on Appear {#transition-on-appear} If you also want to apply a transition on the initial render of a node, you can add the `appear` prop: @@ -507,7 +507,7 @@ If you also want to apply a transition on the initial render of a node, you can ``` -## Transition Between Elements +## Transition Between Elements {#transition-between-elements} In addition to toggling an element with `v-if` / `v-show`, we can also transition between two elements using `v-if` / `v-else` / `v-else-if`, as long as we make sure that there is only one element being shown at any given moment: @@ -523,7 +523,7 @@ In addition to toggling an element with `v-if` / `v-show`, we can also transitio [Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgZG9jU3RhdGUgPSByZWYoJ3NhdmVkJylcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG5cdDxzcGFuIHN0eWxlPVwibWFyZ2luLXJpZ2h0OiAyMHB4XCI+Q2xpY2sgdG8gY3ljbGUgdGhyb3VnaCBzdGF0ZXM6PC9zcGFuPlxuICA8ZGl2IGNsYXNzPVwiYnRuLWNvbnRhaW5lclwiPlxuXHRcdDxUcmFuc2l0aW9uIG5hbWU9XCJzbGlkZS11cFwiPlxuICAgICAgPGJ1dHRvbiB2LWlmPVwiZG9jU3RhdGUgPT09ICdzYXZlZCdcIlxuICAgICAgICAgICAgICBAY2xpY2s9XCJkb2NTdGF0ZSA9ICdlZGl0ZWQnXCI+RWRpdDwvYnV0dG9uPlxuICAgICAgPGJ1dHRvbiB2LWVsc2UtaWY9XCJkb2NTdGF0ZSA9PT0gJ2VkaXRlZCdcIlxuICAgICAgICAgICAgICBAY2xpY2s9XCJkb2NTdGF0ZSA9ICdlZGl0aW5nJ1wiPlNhdmU8L2J1dHRvbj5cbiAgICAgIDxidXR0b24gdi1lbHNlLWlmPVwiZG9jU3RhdGUgPT09ICdlZGl0aW5nJ1wiXG4gICAgICAgICAgICAgIEBjbGljaz1cImRvY1N0YXRlID0gJ3NhdmVkJ1wiPkNhbmNlbDwvYnV0dG9uPlxuICAgIDwvVHJhbnNpdGlvbj5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c3R5bGU+XG4uYnRuLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDFlbTtcbn1cblxuYnV0dG9uIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xufVxuXG4uc2xpZGUtdXAtZW50ZXItYWN0aXZlLFxuLnNsaWRlLXVwLWxlYXZlLWFjdGl2ZSB7XG4gIHRyYW5zaXRpb246IGFsbCAwLjI1cyBlYXNlLW91dDtcbn1cblxuLnNsaWRlLXVwLWVudGVyLWZyb20ge1xuICBvcGFjaXR5OiAwO1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMzBweCk7XG59XG5cbi5zbGlkZS11cC1sZWF2ZS10byB7XG4gIG9wYWNpdHk6IDA7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMzBweCk7XG59XG48L3N0eWxlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==) -## Transition Modes +## Transition Modes {#transition-modes} In the previous example, the entering and leaving elements are animated at the same time, and we had to make them `position: absolute` to avoid the layout issue when both elements are present in the DOM. @@ -541,7 +541,7 @@ Here's the previous demo with `mode="out-in"`: `` also supports `mode="in-out"`, although it's much less frequently used. -## Transition Between Components +## Transition Between Components {#transition-between-components} `` can also be used around [dynamic components](/guide/essentials/component-basics.html#dynamic-components): @@ -564,7 +564,7 @@ Here's the previous demo with `mode="out-in"`: -## Dynamic Transitions +## Dynamic Transitions {#dynamic-transitions} `` props like `name` can also be dynamic! It allows us to dynamically apply different transitions based on state change: diff --git a/src/guide/components/async.md b/src/guide/components/async.md index cc06ed1a..5a35c441 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -1,6 +1,6 @@ -# Async Components +# Async Components {#async-components} -## Basic Usage +## Basic Usage {#basic-usage} 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`](/api/general.html#defineasynccomponent) function: @@ -82,7 +82,7 @@ const AdminPage = defineAsyncComponent(() => -## Loading and Error States +## Loading and Error States {#loading-and-error-states} Asynchronous operations inevitably involve loading and error states - `defineAsyncComponent()` supports handling these states via advanced options: @@ -108,6 +108,6 @@ If a loading component is provided, it will be displayed first while the inner c If an error component is provided, it will be displayed when the Promise returned by the loader function is rejected. You can also specify a timeout to show the error component when the request is taking too long. -## Using with Suspense +## Using with Suspense {#using-with-suspense} Async components can be used with the `` built-in component. The interaction between `` and async components is documented in the [dedicated chapter for ``](/guide/built-ins/suspense.html). diff --git a/src/guide/components/attrs.md b/src/guide/components/attrs.md index cc42f403..3dfc6deb 100644 --- a/src/guide/components/attrs.md +++ b/src/guide/components/attrs.md @@ -2,11 +2,11 @@ outline: deep --- -# Fallthrough Attributes +# Fallthrough Attributes {#fallthrough-attributes} > This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components. -## Attribute Inheritance +## Attribute Inheritance {#attribute-inheritance} A "fallthrough attribute" is an attribute or `v-on` event listener that is passed to a component, but is not explicitly declared in the receiving component's [props](./props) or [emits](./events.html#declaring-emitted-events). Common examples of this include `class`, `style`, and `id` attributes. @@ -31,7 +31,7 @@ The final rendered DOM would be: Here, `` did not declare `class` as an accepted prop. Therefore, `class` is treated as a fallthrough attribute and automatically added to ``'s root element. -### `class` and `style` Merging +### `class` and `style` Merging {#class-and-style-merging} If the child component's root element already has existing `class` or `style` attributes, it will be merged with the `class` and `style` values that are inherited from the parent. Suppose we change the template of `` in the previous example to: @@ -46,7 +46,7 @@ Then the final rendered DOM would now become: ``` -### `v-on` Listener Inheritance +### `v-on` Listener Inheritance {#v-on-listener-inheritance} The same rule applies to `v-on` event listeners: @@ -56,7 +56,7 @@ The same rule applies to `v-on` event listeners: The `click` listener will be added to the root element of ``, i.e. the native `