# uvue组件概述

uni-app x支持的组件包括：

内置基础组件
自定义vue组件
uts组件插件

不支持的组件包括：

小程序wxml组件

支持easycom。

内置组件比较简单，扩展组件的2种方式详细介绍下

自定义vue组件在components目录新建一个uvue/vue文件，按vue组件规范编写代码。

组件界面通过uvue构造，script使用uts编写。

返回的类型是组件实例ComponentPublicInstance。
uts组件插件 uts组件插件的名称可能有点拗口，这是因为是相对于另一个分类uts api插件。

它们同属于uts插件，是uni_modules。api插件指能力扩展，比如蓝牙api。而组件插件指界面元素扩展，比如video、map、lottie动画等。

uts组件插件，指把原生的、需要在界面上显示的、内嵌于页面中整体排版的组件，编写uts代码调用原生sdk，通过uni_modules插件的方式集成到uni-app项目中。比如
- lottie组件，使用uts调用原生的lottie sdk来开发组件，再引入页面中。详见
- video组件，其实官方的video，也是用uts组件插件实现的
uts组件插件，主要用于原生sdk涉及界面时，将其封装为界面组件。当然uts组件也是全端支持的。上述lottie组件也支持web端。

在app端，它的内部界面是由原生sdk绘制的，而不是uvue代码绘制的。通过封装嵌入到uvue/nvue页面中。

一个uts插件都是可以同时兼容uni-app x和uni-app js引擎版的。目前js引擎版仅支持内嵌于nvue页面中。所以上述lottie组件也是可以在app-nvue页面中使用的。

uts组件的返回类型是dom元素Element

uts组件插件的开发教程，详见

vue组件兼容性及注意事项：

# props

仅支持对象方式声明。
复杂数据类型需要通过 PropType 标记类型，详见。

import { type PropType } from 'vue'

type Obj = { a: number }

export default {
	props: {
		num: {
			type: Number,
			required: true
		},
		str: {
			type: String,
			default: 'str',
			validator(value: string): boolean {
				return value.length > 0
      }
		},
		obj: {
			type: Object as PropType<Obj>,
			default: (): Obj => ({ a: 1 } as Obj)
		},
		arr: {
			type: Array as PropType<number[]>,
			default: (): number[] => [1, 2, 3]
		}
	}
}

# 自定义事件

v-model 暂不支持 capitalize 修饰符。

# 计算属性和侦听器

watch deep 不支持
监听对象中单个属性不支持

# 作用域插槽的类型

作用域插槽需在组件中指定插槽数据类型

// components/Foo.uvue
<view>
    <slot msg="test msg" />
</view>

import { SlotsType } from 'vue'
export default {
  slots: Object as SlotsType<{
    default: { msg: string }
  }>
}
// page.uvue
<view>
	<Foo>
		<template v-slot="slotProps">
			<text>{{ slotProps.msg }}</text>
		</template>
	</Foo>
</view>

# ref

在 uni-app js 引擎版中，非 H5端 只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）。
在 uni-app x 中，内置组件会返回组件根节点的引用，自定义组件会返回组件实例。

注意事项：

如果多个节点或自定义组件绑定相同 ref 属性，将获取到最后一个节点或组件实例的引用。
在 v-for 循环时，绑定 ref 属性会获取到节点或组件实例的集合。
在 uni-app x 中，要访问 $refs 中的属性，需要使用索引方式。

uni-app js 引擎版

uni-app x

<template>
	<view>
		<text ref="text">text node</text>
		<Foo ref="foo" />
	</view>
</template>

<script lang="ts">
  import type { ComponentPublicInstance } from 'vue'

	export default {
		onReady() {
			const text = this.$refs.text as Element // 仅H5端支持
			const foo = this.$refs.foo as ComponentPublicInstance
		}
	}
</script>