docs: update study log

Co-authored-by: Copilot <copilot@github.com>

Author: zhenyuWang

English/Vue/Essentials/Components-Basics.md

@@ -41,3 +41,54 @@ The template is inlined as a JavaScript string here, which Vue will compile on t
 on the fly 立即，立刻
 
 The example above defines a single component and exports it as the default export of a `.js` file, but you can use named exports to export multiple components from the same file.
+
+## Using a Component​
+#### TIP
+
+We will be using SFC syntax for the rest of this guide - the concepts around components are the same regardless of whether you are using a build step or not. The Examples section shows component usage in both scenarios.\
+scenario [/sɪˈnɑːriəʊ/] 场景
+
+To use a child component, we need to import it in the parent component. Assuming we placed our counter component inside a file called `ButtonCounter.vue`, the component will be exposed as the file's default export:\
+assume [/əˈsjuːm/] 假设
+
+```vue
+<script>
+import ButtonCounter from './ButtonCounter.vue'
+
+export default {
+  components: {
+    ButtonCounter
+  }
+}
+</script>
+
+<template>
+  <h1>Here is a child component!</h1>
+  <ButtonCounter />
+</template>
+```
+To expose the imported component to our template, we need to register it with the `components` option. The component will then be available as a tag using the key it is registered under.
+
+It's also possible to globally register a component, making it available to all components in a given app without having to import it. The pros and cons of global vs. local registration is discussed in the dedicated Component Registration section.
+
+Components can be reused as many times as you want:
+
+```template
+<h1>Here are many child components!</h1>
+<ButtonCounter />
+<ButtonCounter />
+<ButtonCounter />
+```
+
+Notice that when clicking on the buttons, each one maintains its own, separate `count`. That's because each time you use a component, a new instance of it is created.
+
+In SFCs, it's recommended to use `PascalCase` tag names for child components to differentiate from native HTML elements. Although native HTML tag names are case-insensitive, Vue SFC is a compiled format so we are able to use case-sensitive tag names in it. We are also able to use `/>` to close a tag.
+
+If you are authoring your templates directly in a DOM (e.g. as the content of a native `<template>` element), the template will be subject to the browser's native HTML parsing behavior. In such cases, you will need to use `kebab-case` and explicit closing tags for components:
+
+```template
+<!-- if this template is written in the DOM -->
+<button-counter></button-counter>
+<button-counter></button-counter>
+<button-counter></button-counter>
+```

README.md

@@ -4,6 +4,9 @@
 
 # 日志
 
+## 2026.5.14
+[Vue doc Components Basics](./English/Vue/Essentials/Components-Basics.md)
+
 ## 2026.5.13
 [Vue doc Components Basics](./English/Vue/Essentials/Components-Basics.md)