vue.use和component,Vue component

　　本文主要介绍了Vue3定义组件作用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

defineComponent重载函数

　　1:直接设置功能

　　//重载1:直接设置函数

　　//(使用用户定义的道具接口)

　　导出函数defineComponentProps，RawBindings=object(

　　设置： (

　　道具：ReadonlyProps，

　　ctx: SetupContext

　　)=原始绑定渲染函数

　　):DefineComponentProps，RawBindings

　　2：object format with no props

　　//重载2:没有属性的对象格式

　　//(使用用户定义的道具接口)

　　//返回类型用于韦图尔和多伦多股票交易所支持

　　导出函数定义组件

　　Props={}，

　　RawBindings={}

　　D={}，

　　c扩展ComputedOptions={}，

　　m扩展MethodOptions={}，

　　米欣扩展ComponentOptionsMixin=ComponentOptionsMixin，

　　延伸扩展ComponentOptionsMixin=ComponentOptionsMixin，

　　e延长发射次数=发射次数，

　　电子工程师扩展字符串=字符串

　　（

　　选项：component options with outpropsprops、RawBindings、D、C、M、Mixin、Extends、E、EE

　　):DefineComponentProps，RawBindings，D，C，M，Mixin，Extends，E，EE

　　3：object format with array props declaration

　　//重载3:带有数组属性声明的对象格式

　　//道具推断为{[键入属性名]？任何}

　　//返回类型用于韦图尔和多伦多股票交易所支持

　　导出函数定义组件

　　属性名扩展字符串，

　　原始绑定，

　　d，

　　c扩展ComputedOptions={}，

　　m扩展了MethodOptions={}，

　　米欣扩展ComponentOptionsMixin=ComponentOptionsMixin，

　　延伸扩展ComponentOptionsMixin=ComponentOptionsMixin，

　　e扩展发出选项=记录字符串，any，

　　电子工程师扩展字符串=字符串

　　（

　　选项：组件选项带ArrayProps

　　PropNames，

　　原始绑定，

　　):定义组件

　　只读{[键入属性名]?任何},

　　原始绑定，

　　4: object format with object props declaration

　　//重载4:带有对象属性声明的对象格式

　　//请参见中的ExtractPropTypes ./componentProps.ts

　　导出函数定义组件

　　只读约束允许分时（同timesharing）处理{必填：真}的类型

　　//作为常数而不是布尔值。

　　建议扩展了ReadonlyComponentPropsOptions，

　　原始绑定，

　　d，

　　c扩展ComputedOptions={}，

　　m扩展了MethodOptions={}，

　　米欣扩展ComponentOptionsMixin=ComponentOptionsMixin，

　　延伸扩展ComponentOptionsMixin=ComponentOptionsMixin，

　　e扩展发出选项=记录字符串，any，

　　电子工程师扩展字符串=字符串

　　（

　　选项：组件选项WithObjectProps

　　PropsOptions，RawBindings，D，C，M，Mixin，Extends，E，EE

　　):DefineComponentPropsOptions，RawBindings，D，C，M，Mixin，Extends，E，EE

开发实践

　　除去单元测试中几种基本的用法，在以下的父对话框组件中，主要有这几个实际开发中要注意的点：

　　自定义组件和全局组件的写法

　　注入、引用等的类型约束

　　设置的写法和相应h的注入问题

　　多伦多股票交易所中v型车和scopedSlots的写法

　　ParentDialog.vue

　　脚本语言=tsx

　　从"洛达什"导入{ noop，trim }；

　　导入{

　　注入，引用，定义组件，获取当前实例，引用

　　}来自@ vue/composition-API ；

　　从" @/过滤器"导入过滤器；

　　从" @/组件/CommonDialog "导入公共对话框；

　　从""导入子表{ getEmptyModelRow } ./子表。vue ；

　　导出接口IParentDialog {

　　show:boolean；

　　specFn:(component _ id:host component[ id ])=Promise { data:dict specs }；

　　}

　　导出默认的defineComponentIParentDialog({

　　//tsx中自定义组件依然要注册

　　组件：{

　　子表

　　道具：{

　　显示：{

　　类型：布尔型，

　　默认值：错误

　　specFn: {

　　类型：功能，

　　默认值：noop

　　}

　　//注意：设置须用箭头函数

　　设置：(道具，上下文)={

　　//修正多伦多股票交易所中无法自动注入 h 函数的问题

　　//eslint-disable-next-line no-unused-vars

　　const h=getCurrentInstance()！$ createElement

　　const { emit }=上下文

　　const { specFn，show }=props

　　//过滤器的用法

　　const { withColon }=过滤器；

　　//注入的用法

　　const page type=injectCompSpecType( pageType ， foo )；

　　const dict components=injectRefDictComp[]( dict components ，ref([]))；

　　//ref的类型约束

　　const dict specs=ref dict specs([])；

　　const loading=ref(false)；

　　const _ lookup specs=async(component _ id:主机组件[ id ])={

　　loading.value=true

　　尝试{

　　const JSON=await spec fn(component _ id)；

　　字典规格。value=JSON。数据；

　　}最后{

　　loading.value=false

　　}

　　};

　　const formdata=refSpec({

　　组件标识： ,

　　specs_id: ，

　　模型：[getEmptyModelRow()]

　　});

　　const err 1=ref()；

　　const err 2=ref()；

　　const _ doc check=()={

　　错误1。值=" "；

　　错误2。值=" "；

　　const {组件标识，规格标识，型号}=formdata.value

　　如果(!组件id) {

　　err1.value=请选择部件；

　　返回错误的

　　}

　　对于(设I=0；我型号。长度；i ) {

　　const { brand_id，data }=model[I]；

　　如果(!brand_id) {

　　err2.value=请选择品牌；

　　返回错误的

　　}

　　如果（

　　formdata.value.model.some(

　　(m，midx)=midx！==I String(m . brand _ id)===String(brand _ id)

　　)

　　) {

　　err2.value=品牌重复；

　　返回错误的

　　}

　　返回真实的

　　};

　　const onClose=()={

　　emit(update:show ，false)；

　　};

　　const onSubmit=async ()={

　　const bool=_ doc heck()；

　　如果(!布尔)返回；

　　const params=formdata.value

　　发出( submit ，params)；

　　onClose()；

　　};

　　//注意：在多伦多股票交易所中，元素-用户界面等全局注册的组件依然要用烤肉串盒形式？

　　return ()=(

　　通用对话框

　　class=comp

　　title=新建

　　宽度= 1000像素

　　labelCancel=取消

　　labelSubmit=确定

　　vLoading={loading.value}

　　show={show}

　　onClose={onClose}

　　onSubmit={onSubmit}

　　El-form标签宽度= 140 px class= create-page

　　el-form-item label={withColon(部件类型)}必需={true}错误={err1.value}

　　埃尔-选择

　　 class=全角

　　型号={{

　　值：formdata。价值。组件id，

　　回调：(v: string)={

　　表单数据。价值。组件标识=v；

　　_查找规格(v)；

　　}

　　}}

　　{字典组件。价值。map((dict comp:dict comp)=(

　　El-option key={ dict comp。id } label={ dict comp。component _ name } value={ dict comp。id }/

　　))}

　　/el-select

　　/El-表单-项目

　　{formdata.value.component_id？（

　　El-form-item标签宽度= 0 标签= 必需={ true }错误={ err 2。价值}

　　子表

　　list={formdata.value.model}

　　onChange={(v: Spec[model])={

　　表单数据。价值。型号=v；

　　}}

　　onError={(err: string)={

　　错误3。值=err

　　}}

　　scopedSlots={{

　　默认值：(范围：任何)=(

　　p{ scope.foo }/p

　　)

　　}}

　　/El-表单-项目

　　):null}

　　/el格式

　　/CommonDialog

　　);

　　}

　　});

　　/脚本

　　样式lang=scss 范围

　　/风格

　　全文总结

　　引入定义组件()以正确推断设置()组件的参数类型

　　DefineComponent可以正确适应无道具、数组道具等形式。

　　DefineComponent可以接受显式自定义props接口或从属性验证对象中自动推断。

　　在tsx中，全局注册的组件如element-ui仍然是kebab-case的形式。

　　在tsx中，v-model应该写成model={{ value，callback }}

　　在tsx中，作用域槽应该写成scopedSlots={{ foo: (scope)=() }}

　　DefineComponent不适用于功能组件，应使用RenderContext解决。

　　关于Vue3 defineComponent的作用这篇文章到此为止。有关Vue3 defineComponent角色的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue.use和component,Vue component

目录

defineComponent重载函数

开发实践

相关文章阅读