Skip to content

Commit 43a0037

Browse files
Document removal of $children API on Migration guide (#670)
* feat: added children to migration guide * feat: added link to migration introduction
1 parent 0e5b678 commit 43a0037

File tree

2 files changed

+40
-1
lines changed

2 files changed

+40
-1
lines changed

src/guide/migration/children.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
badges:
3+
- removed
4+
---
5+
6+
# $children <MigrationBadges :badges="$frontmatter.badges" />
7+
8+
## Overview
9+
10+
`$children` instance property removed from Vue 3.0 and no longer supported.
11+
12+
## 2.x Syntax
13+
14+
In 2.x, developers could access direct child components of the current instance with `this.$children`:
15+
16+
```html
17+
<div ref="app" id="app">
18+
<img alt="Vue logo" src="./assets/logo.png" width="25%" />
19+
<my-button>Change logo</my-button>
20+
</div>
21+
```
22+
23+
```js
24+
export default {
25+
name: "App",
26+
components: {
27+
MyButton,
28+
},
29+
mounted() {
30+
console.log(this.$children); // [VueComponent]
31+
},
32+
};
33+
</script>
34+
```
35+
36+
## 3.x Update
37+
38+
In 3.x, `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs).

src/guide/migration/introduction.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,10 @@ The following consists a list of breaking changes from 2.x:
109109
### Removed APIs
110110

111111
- [`keyCode` support as `v-on` modifiers](/guide/migration/keycode-modifiers.html)
112-
- [$on, $off and \$once instance methods](/guide/migration/events-api.html)
112+
- [$on, $off and $once instance methods](/guide/migration/events-api.html)
113113
- [Filters](/guide/migration/filters.html)
114114
- [Inline templates attributes](/guide/migration/inline-template-attribute.html)
115+
- [`$children` intance property](/guide/migration/children.md)
115116
- `$destroy` instance method. Users should no longer manually manage the lifecycle of individual Vue components.
116117

117118
## Supporting Libraries

0 commit comments

Comments
 (0)