vuejs3.0 从入门到精通——根组件

根组件

https://cn.vuejs.org/guide/essentials/application.html#the-root-component

一、先创建一个vue实例

每个 Vue 应用都是通过createApp函数创建一个新的应用实例：

?

1 2 3 4 5

import { createApp } from 'vue'   const app = createApp({   /* 根组件选项 */ })

二、聊聊根组件

我们传入createApp的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件，比如：

js:

?

1 2 3 4 5

import { createApp } from 'vue' // 这里开始和上面创建的方式不同了。这是从一个单文件组件中导入根组件。 import App from './App.vue'   const app = createApp(App)

我们这里的示例是一个单文件组件，实际上，一些大型的真实应用往往都是一个个嵌套的、可重用的组件树组成。让我们看看 vue 官网给的例子：

?

1 2 3 4 5 6 7 8

App (root component) ├─ TodoList │  └─ TodoItem │     ├─ TodoDeleteButton │     └─ TodoEditButton └─ TodoFooter    ├─ TodoClearButton    └─ TodoStatisticsj

就是这个样子啦！

三、挂载应用

应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

html:

?

1	<div id="app"></div>

js:

?

1	app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount()方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。