Vue3中的依赖注入与组件定义怎么实现

functionprovide(key:InjectionKey|string,value:T):void

exportinterfaceInjectionKeyextendsSymbol{}

//没有默认值
functioninject(key:InjectionKey|string):T|undefined

//带有默认值
functioninject(key:InjectionKey|string,defaultValue:T):T

//使用工厂函数
functioninject(
key:InjectionKey|string,
defaultValue:()=>T,
treatDefaultAsFactory:true
):T

//provide

//inject

import{typeInjectionKey,inject,provide}from'vue-demi'

/**
*创建可以注入到组件中的全局状态
*/
exportfunctioncreateInjectionState,Return>(
composable:(...args:Arguments)=>Return
):readonly[
useProvidingState:(...args:Arguments)=>Return,
useInjectedState:()=>Return|undefined
]{
constkey:string|InjectionKey=Symbol('InjectionState')
constuseProvidingState=(...args:Arguments)=>{
conststate=composable(...args)
provide(key,state)
returnstate
}
constuseInjectedState=()=>inject(key)
return[useProvidingState,useInjectedState]
}

functionnextTick(callback?:()=>void):Promise

exportdefaultdefineComponent({免费云主机域名
......
constsyncMenuState=(
newCheckedNodes:CascaderNode[],
reserveExpandingState=true
)=>{
......
checkedNodes.value=newNodes
nextTick(scrollToExpandingNode)
}
constscrollToExpandingNode=()=>{
if(!isClient)return
menuList.value.forEach((menu)=>{
constmenuElement=menu?.$el
if(menuElement){
constcontainer=menuElement.querySelector(`.${ns.namespace.value}-scrollbar__wrap`)
constactiveNode=menuElement.querySelector(`.${ns.b('node')}.${ns.is('active')}`)||
menuElement.querySelector(`.${ns.b('node')}.in-active-path`)
scrollIntoView(container,activeNode)
}
})
}
......
})

exportfunctionuseInfiniteScroll(
element:MaybeComputedRef
......
){
conststate=reactive(......)
watch(
()=>state.arrivedState[direction],
async(v)=>{
if(v){
constelem=resolveUnref(element)asElement
......
if(options.preserveScrollPosition&&elem){
nextTick(()=>{
elem.scrollTo({
top:elem.scrollHeight-previous.height,
left:elem.scrollWidth-previous.width,
})
})
}
}
}
)
}

functiondefineComponent(
component:ComponentOptions|ComponentOptions['setup']
):ComponentConstructor

constFoo=defineComponent(/*...*/)
//提取出一个组件的实例类型(与其选项中的this的类型等价)
typeFooInstance=InstanceType

import{defineComponent,renderSlot,watch}from'vue'
import{provideGlobalConfig}from'./hooks/use-global-config'
import{configProviderProps}from'./config-provider-props'
......
constConfigProvider=defineComponent({
name:'ElConfigProvider',
props:configProviderProps,

setup(props,{slots}){
......
},
})
exporttypeConfigProviderInstance=InstanceType

exportdefaultConfigProvider

exportdefault/*#__PURE__*/defineComponent(/*...*/)

import{defineComponent,h,ref}from'vue-demi'
import{onClickOutside}from'@vueuse/core'
importtype{RenderableComponent}from'../types'
importtype{OnClickOutsideOptions}from'.'
exportinterfaceOnClickOutsidePropsextendsRenderableComponent{
options?:OnClickOutsideOptions
}
exportconstOnClickOutside=/*#__PURE__*/defineComponent({
name:'OnClickOutside',
props:['as','options']asunknownasundefined,
emits:['trigger'],
setup(props,{slots,emit}){
......

return()=>{
if(slots.default)
returnh(props.as||'div',{ref:target},slots.default())
}
},
})

functiondefineAsyncComponent(
source:AsyncComponentLoader|AsyncComponentOptions
):Component
typeAsyncComponentLoader=()=>Promise
interfaceAsyncComponentOptions{
loader:AsyncComponentLoader
loadingComponent?:Component
errorComponent?:Component
delay?:number
timeout?:number
suspensible?:boolean
onError?:(
error:Error,
retry:()=>void,
fail:()=>void,
attempts:number
)=>any
}

functiondefineCustomElement(
component:
|(ComponentOptions&{styles?:string[]})
|ComponentOptions['setup']
):{
new(props?:object):HTMLElement
}

import{defineCustomElement}from'vue'
constMyVueElement=defineCustomElement({
/*组件选项*/
})
//注册自定义元素
customElements.define('my-vue-element',MyVueElement)

import{defineCustomElement}from'vue'

constMyVueElement=defineCustomElement({
//这里是同平常一样的Vue组件选项
props:{},
emits:{},
template:`...`,
//defineCustomElement特有的：注入进shadowroot的CSS
styles:[`/*inlinedcss*/`],
})
//注册自定义元素
//注册之后，所有此页面中的``标签
//都会被升级
customElements.define('my-vue-element',MyVueElement)
//你也可以编程式地实例化元素：
//（必须在注册之后）
document.body.appendChild(
newMyVueElement({
//初始化props（可选）
})
)
//组件使用