Vue 官方笔记--组件_basic-container

中文版(英文浓缩)

组件是什么？

组件：具有预定义选项的实例
组件是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用
通过 prop ，我们可以实现父子组件之间的解耦，有了属性，子组件中就可以使用更为复杂的模板和逻辑，比如如下

<!-- 复制到 html 中可以直接运行哦，看看是什么结果吧 -->
<div id="main">
    <ol>	
        <!-- 子组件 -->
        <todo-item v-for="todo in groceryList" 
                   :key="todo.id" 
                   :todo="todo">
        </todo-item>
    </ol>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const TodoList = {
     
        data() {
     
            return {
     
                groceryList: [
                    {
      id: 0, text: 'Vegetables' },
                    {
      id: 1, text: 'Cheese' },
                    {
      id: 2, text: 'Meat' }
                ]
            }
        }
    }
    const app = Vue.createApp(TodoList)
    // 父组件       
    // 试想，如果没有定义在父组件中定义 todo 这个属性，该怎样实现同样的功能呢？ 不好实现呀
    app.component('todo-item', {
     
        props: ['todo'],
        template: `<li>{
      { todo.text }}</li>`
    })
    app.mount('#main')
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

创建应用实例

通过 createApp 函数创建创建了应用实例(application instance)，它表明 Vue 应用的开始

这个应用实例未来会通过 mount 函数变成根组件实例，这就是应用实例最终的命运吗？有点科幻色彩~

const app = Vue.createApp(RootComponent)
1

这个应用实例用来注册一个全局信息，在整个 Vue 应用中的所有组件都可以使用这个全局信息

应用实例相当于一个进程，而组件就相当于一个线程，线程之间可以相互合作，并共享进程的信息

根组件

const RootComponentConfig = {
    
    // data() 函数是用于配置根组件的其中之一的选项，此外还有 methods()、computed() 等
    data() {
   
        return {
   
            a: 123
        }
    }
}
// RootComponentConfig 用于配置根组件实例，虽然根组件是调用 mount() 才返回的，但是就好像提前占一个坑，预定一样 
const applicationInstance = Vue.createApp(RootComponentConfig)
const rootComponentInstance = applicationInstance.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

当我们为我们的应用实例使用 mount 方法（即挂载）时，表明这个应用实例(此时应该是根组件了)被用作渲染的起点

应用实例调用方法(除了mount 方法）后，还是会返回一个应用实例(比如 app 是一个应用实例，调用 app.component( /* xxx */ ) 之后，还是会返回一个应用实例）

但是，mount 方法不会返回应用实例，而是会返回根组件实例

应用实例最终需要挂载到一个 DOM 元素中() 如<div id="app"></div>，于是我们给 mount 传递 #app

mount 内部是这样实现的

const res = document.querySelector('#app')
return res
1
2

每个组件都会有自己的组件实例，比如

// 会有一个组件实例
app.component('haha', {
   
  template: `
    <h1>
      haha
    </h1>`
})
1
2
3
4
5
6
7
8

在应用中的组件实例都会共享根组件实例

我们可以在组件实例中添加用户自定义的属性，如methods, props, computed, inject and setup

这些所有的自定义属性都可以在模板中使用，比如

<!-- 可复制直接运行 -->
<div id="main">
    <!-- 在模板中使用了组件实例中的 data() 属性 -->
    {
  { a }}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
     
        data() {
     
            return {
     
                a: 123
            }
        },
    })
    app.mount('#main')
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

英文原版

看英文版是真的过瘾，比中文版更好理解

what is the Component?

component is an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components.

component ：instance with pre-defined options

In Vue, a component is essentially an ❤️instance with pre-defined options. Registering a component in Vue is straightforward

// Create Vue application
const app = Vue.createApp(...)

// Define a new component called todo-item
app.component('todo-item', {
   
  template: `<li>This is a todo</li>`
})

// Mount Vue application
app.mount(...)				// mount will returns the root component instance
1
2
3
4
5
6
7
8
9
10
11

But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let’s modify the component definition to make it accept a prop

app.component('todo-item', {
   
  props: ['todo'],
  template: `<li>{
    { todo.text }}</li>`
})
1
2
3
4
5
6

we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the ⭐️props interface. We can now further improve our <todo-item> component with more complex template and logic without affecting the parent app.

In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components later in the guide, but here’s an (imaginary) example of what an app’s template might look like with components:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>
1
2
3
4
5
6
7

Creating an Application Instance

Every Vue application starts by creating a new application instance with the createApp function:

// app is a new application instance
const app = Vue.createApp({
   	
  /* options */
})
1
2
3
4
5

The application instance is used to register ‘globals’ that can then be used by components within that application. We’ll discuss that in detail later in the guide but as a quick example:

const app = Vue.createApp({
   })
// application instance is used by components
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)
1
2
3
4
5
6

Most of the methods exposed by the application instance return that same instance (chain)

The Root Component

The options passed to createApp are used to configure the root component.

That component is used as the ​