From 742e6440aa20b1f264ffecc0a8d017a533b67fb4 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Wed, 11 Nov 2020 09:52:42 +0000
Subject: [PATCH] fix: revise the migration guide for $children, especially the
 example

---
 src/guide/migration/children.md | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/guide/migration/children.md b/src/guide/migration/children.md
index 3736a092c7..087a6ee969 100644
--- a/src/guide/migration/children.md
+++ b/src/guide/migration/children.md
@@ -7,32 +7,34 @@ badges:
 
 ## Overview
 
-`$children` instance property removed from Vue 3.0 and no longer supported.
+The `$children` instance property has been removed from Vue 3.0 and is no longer supported.
 
 ## 2.x Syntax
 
 In 2.x, developers could access direct child components of the current instance with `this.$children`:
 
-```html
-<div ref="app" id="app">
-  <img alt="Vue logo" src="./assets/logo.png" width="25%" />
-  <my-button>Change logo</my-button>
-</div>
-```
+```vue
+<template>
+  <div>
+    <img alt="Vue logo" src="./assets/logo.png">
+    <my-button>Change logo</my-button>
+  </div>
+</template>
+
+<script>
+import MyButton from './MyButton'
 
-```js
 export default {
-  name: "App",
   components: {
-    MyButton,
+    MyButton
   },
   mounted() {
-    console.log(this.$children); // [VueComponent]
-  },
-};
+    console.log(this.$children) // [VueComponent]
+  }
+}
 </script>
 ```
 
 ## 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).
+In 3.x, the `$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).