vue3.0 defineComponent、resolvComponent等
1、defineComponent从实现上看:defineComponent只返回传递给它的对象就类型而言:返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。export default defineComponent({...})2、defineAsyncComponent创建一个只有在需要时才会加载的异步组件。可以接受一个返回Promise的工厂函数const
·
1、defineComponent
从实现上看:defineComponent只返回传递给它的对象
就类型而言:返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。
export default defineComponent({
data() {
return { count: 1 }
},
methods: {
}
...
})
或者返回一个setup函数,函数名即为组件名
defineComponent(function HelloWorld() {
const count = ref(0)
return { count }
})
2、defineAsyncComponent
创建一个只有在需要时才会加载的异步组件。可以接受一个返回Promise的工厂函数
const AsyncComp = defineAsyncComponent(
() =>
new Promise((resolve, reject) => {
resolve回调应该在服务端返回组件定义后被调用
resolve({
template: '<div>I am async!</div>'
})
})
)
方式一:
当使用局部注册时,也可以直接提供一个返回Promise的函数:
components: {
AsyncComponent: defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
}
方式二:
const AsyncComp = defineAsyncComponent({
loader: () => import('./Foo.vue') 工厂函数
loadingComponent: LoadingComponent, 加载异步组件时要使用的组件
errorComponent: ErrorComponent, 加载失败时要使用的组件
delay: 200, 在显示loadingComponent之前的延迟 | 默认值:200ms
timeout: 3000, 加载组件的时间超过了设定值,将显示错误组件,Infinity即永不超时
suspensible: false, 定义组件是否可挂起 | 默认值:true
onError(error, retry, fail, attempts) {
error:错误信息对象
retry:一个函数,用于指示当 promise 加载器 reject 时,加载器是否应该重试
fail:一个函数,指示加载程序结束退出
attempts:允许的最大重试次数
if (error.message.match(/fetch/) && attempts <= 3) {
retry() 请求发生错误时重试,最多可尝试 3 次
} else {
fail()
}
retry/fail就像promise的resolve/reject一样,必须调用其中一个才能继续错误处理。
}
})
3、resolveComponent
如果在当前应用实例中可用,则允许按名称解析component返回一个Component,否则返回接收的参数name
只能在render或setup函数中使用。
const app = Vue.createApp({})
app.component('MyComponent', {
...
})
import { resolveComponent } from 'vue'
render() {
const MyComponent = resolveComponent('MyComponent')
}
4、resolveDynamicComponent
返回已解析的Component或新创建的VNode,其中组件名称作为节点标签,如果找不到Component,将发出警告。
只能在render或setup函数中使用。
resolveDynamicComponent(String|Object(组件的选项对象))
import { resolveDynamicComponent } from 'vue'
render () {
const MyComponent = resolveDynamicComponent('MyComponent')
}
5、defineCustomElement
该方法接受和defineComponent相同的参数,但是返回一个原生的自定义元素,该元素可以用于任意框架或不基于框架使用。
6、resolveDirective
能在 render 或 setup 函数中使用
const app = createApp({})
app.directive('highlight', {})
import { resolveDirective } from 'vue'
render () {
const highlightDirective = resolveDirective('highlight')
}
更多推荐
已为社区贡献36条内容
所有评论(0)