vue3.0中全局注册组件版本1-官方

前言：

      在对vue3.0的使用和学习中，发现了很多和以前不一样的方法，这里聊一聊vue3.0中给我们提供的全局的注册组件方法

官方文档：入口

目录：

具体方法介绍：

1、前提：返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。

2、defineComponent  全局注册异步组件

3、defineAsyncComponent  创建一个只有在需要时才会加载的异步组件。

4、resolveComponent

5、resolveDynamicComponent

6、resolveDirective

7、withDirectives

---

具体方法介绍：

1、前提：返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。

const app = Vue.createApp({})

2、defineComponent  全局注册异步组件

从实现上看，defineComponent 只返回传递给它的对象。但是，就类型而言，返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具支持。

具有组件选项的对象

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

或者是一个 setup 函数，函数名称将作为组件名称来使用

import { defineComponent, ref } from 'vue'

const HelloWorld = defineComponent(function HelloWorld() {
  const count = ref(0)
  return { count }
})

3、defineAsyncComponent  创建一个只有在需要时才会加载的异步组件。

对于基本用法，defineAsyncComponent 可以接受一个返回 Promise 的工厂函数。Promise 的 resolve 回调应该在服务端返回组件定义后被调用。你也可以调用 reject(reason) 来表示加载失败。

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)

当使用局部注册时，你也可以直接提供一个返回 Promise 的函数：

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})

对于高阶用法，defineAsyncComponent 可以接受一个对象：

defineAsyncComponent 方法还可以返回以下格式的对象：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
  // 工厂函数
  loader: () => import('./Foo.vue')
  // 加载异步组件时要使用的组件
  loadingComponent: LoadingComponent,
  // 加载失败时要使用的组件
  errorComponent: ErrorComponent,
  // 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
  delay: 200,
  // 如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件
  // 默认值：Infinity（即永不超时，单位 ms）
  timeout: 3000,
  // 定义组件是否可挂起 | 默认值：true
  suspensible: false,
  /**
   *
   * @param {*} error 错误信息对象
   * @param {*} retry 一个函数，用于指示当 promise 加载器 reject 时，加载器是否应该重试
   * @param {*} fail  一个函数，指示加载程序结束退出
   * @param {*} attempts 允许的最大重试次数
   */
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 请求发生错误时重试，最多可尝试 3 次
      retry()
    } else {
      // 注意，retry/fail 就像 promise 的 resolve/reject 一样：
      // 必须调用其中一个才能继续错误处理。
      fail()
    }
  }
})

参考：动态和异步组件

4、resolveComponent

resolveComponent 只能在 render 或 setup 函数中使用。

如果在当前应用实例中可用，则允许按名称解析 component。

返回一个 Component。如果没有找到，则返回 undefined。

const app = Vue.createApp({})
app.component('MyComponent', {
  /* ... */
})

import { resolveComponent } from 'vue'
render() {
  const MyComponent = resolveComponent('MyComponent')
}

接受一个参数：name

• 类型：String

• 详细：

  已加载的组件的名称。

5、resolveDynamicComponent

resolveDynamicComponent 只能在 render 或 setup 函数中使用。

允许使用与 <component :is=""> 相同的机制来解析一个 component。

返回已解析的 Component 或新创建的 VNode，其中组件名称作为节点标签。如果找不到 Component，将发出警告。

import { resolveDynamicComponent } from 'vue'
render () {
  const MyComponent = resolveDynamicComponent('MyComponent')
}

接受一个参数：component

• 类型：String | Object (组件的选项对象)

• 详细：

  有关详细信息，请参阅动态组件上的文档。

6、resolveDirective

WARNING

resolveDirective 只能在 render 或 setup 函数中使用。

如果在当前应用实例中可用，则允许通过其名称解析一个 directive。

返回一个 Directive。如果没有找到，则返回 undefined。

const app = Vue.createApp({})
app.directive('highlight', {})

import { resolveDirective } from 'vue'
render () {
  const highlightDirective = resolveDirective('highlight')
}

参数 接受一个参数：name

• 类型：String

• 详细：

  已加载的指令的名称。

7、withDirectives

withDirectives 只能在 render 或 setup 函数中使用。

允许将指令应用于 VNode。返回一个包含应用指令的 VNode。

import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')

return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])

参数  接受两个参数：vnode 和 directives。

vnode

• 类型：vnode

• 详细：

  一个虚拟节点，通常使用 h() 创建。

directives

• 类型：Array

• 详细：

  一个指令数组。

更多内容：https://www.vue3js.cn/docs/zh/api/global-api.html#%E5%8F%82%E6%95%B0-4