编辑
2023-04-04
VUE3
0
请注意,本文编写于 620 天前,最后修改于 611 天前,其中某些信息可能已经过时。

目录

初始化项目
创建项目
创建应用实例与挂载
创建实例
挂载实例
说明
类型
注册组件
说明
EG
类型
参数说明
全局挂载变量
获取组件实例和全局实例
挂载全局变量

初始化项目

创建项目

通过pnpm create vue@3

创建应用实例与挂载

创建实例

通过createApp()创建应用实例

import { createApp } from 'vue' const app = createApp({ })

挂载实例

说明

通过.mount()挂载, 接受一个实际DOM元素或者css选择器作为参数

... <div id="app"></div> ... app.mount('#app')

类型

interface App { mount(rootContainer: Element | string): ComponentPublicInstance }

参数:实际DOM元素或者CSS选择器(第一个匹配的元素),返回根组件的实例

注册组件

说明

通过.component()方法注册组件

EG

app.component('CustomButton', CustomButton)

类型

interface App { component(name: string): Component | undefined component(name: string, component: Component): this }

参数说明

1、只传递一个组件名字符串,则返回用该名字注册的组件 | undefined 2、传递组件名及其定义,则注册一个全局组件

全局挂载变量

获取组件实例和全局实例

通过getCurrentInstance方法获取

ts
<script lang="ts" setup> import { getCurrentInstance } from 'vue' // proxy: 当前组件实例,可以理解为组件级别的 this,没有全局的、路由、状态管理之类的 const { proxy, appContext } = getCurrentInstance() // 这个 global 就是全局实例 const global = appContext.config.globalProperties </script>

挂载全局变量

main.ts中通过app.config.globalProperties.[valueName] = value实现

ts
// 添加全局属性 app.config.globalProperties.loading = false

使用:

通过getCurrentInstance方法获取全局实例后,然后通过.[valueName]取值

ts
<script lang="ts" setup> import { getCurrentInstance } from 'vue' // proxy: 当前组件实例,可以理解为组件级别的 this,没有全局的、路由、状态管理之类的 const { proxy, appContext } = getCurrentInstance() // global: 全局实例 const global = appContext.config.globalProperties const loadingType = global.loading </script>

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!