前言:
在对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
5、resolveDynamicComponent
resolveDynamicComponent
只能在 render
或 setup
函数中使用。
允许使用与 <component :is="">
相同的机制来解析一个 component
。
返回已解析的 Component
或新创建的 VNode
,其中组件名称作为节点标签。如果找不到 Component
,将发出警告。
import { resolveDynamicComponent } from 'vue'
render () {
const MyComponent = resolveDynamicComponent('MyComponent')
}
接受一个参数:component
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
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