diff --git a/src/guide/migration/children.md b/src/guide/migration/children.md new file mode 100644 index 0000000000..3736a092c7 --- /dev/null +++ b/src/guide/migration/children.md @@ -0,0 +1,38 @@ +--- +badges: + - removed +--- + +# $children + +## Overview + +`$children` instance property removed from Vue 3.0 and no longer supported. + +## 2.x Syntax + +In 2.x, developers could access direct child components of the current instance with `this.$children`: + +```html +
+ Vue logo + Change logo +
+``` + +```js +export default { + name: "App", + components: { + MyButton, + }, + mounted() { + console.log(this.$children); // [VueComponent] + }, +}; + +``` + +## 3.x Update + +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). diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index b510910234..b45407248d 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -109,9 +109,10 @@ The following consists a list of breaking changes from 2.x: ### Removed APIs - [`keyCode` support as `v-on` modifiers](/guide/migration/keycode-modifiers.html) -- [$on, $off and \$once instance methods](/guide/migration/events-api.html) +- [$on, $off and $once instance methods](/guide/migration/events-api.html) - [Filters](/guide/migration/filters.html) - [Inline templates attributes](/guide/migration/inline-template-attribute.html) +- [`$children` intance property](/guide/migration/children.md) - `$destroy` instance method. Users should no longer manually manage the lifecycle of individual Vue components. ## Supporting Libraries