《uniapp基础知识》学习笔记Day39-（Period2）组件

本文链接：https://blog.csdn.net/qq_38526167/article/details/129341232

一个简单的示例：

<component-name property1="value" property2="value">
	content
</component-name>

组件有自己的命名规则以及使用规则

组件的属性

类型	描述	注解
Boolean	布尔值	组件写上该属性，不管该属性等于什么，其值都为 `true`，只有组件上没有写该属性时，属性值才为 `false`。如果属性值为变量，变量的值会被转换为 `Boolean` 类型。
Number	数字	1, 2.5
String	字符串	"string"
Array	数组	[ 1, "string" ]
Object	对象	{ key: value }
EventHandler	事件处理函数名	`handlerName` 是 methods 中定义的事件处理函数名
Any	任意属性

公共属性列表

属性名	类型	描述	注解
id	String	组件的唯一标示	一般用于获取组件上下文对象（如：VideoContext），需要保持整个页面唯一
ref	String	vue中组件的唯一标示	用来给子组件注册引用信息，详见 Vue 文档
class	String	组件的样式类	在对应的 css 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否隐藏	所有组件默认是显示的
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
@*	EventHandler	组件的事件	详见各组件详细文档，事件绑定参考事件处理器

除了上述公共属性，还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。详见vue指令

在组件中使用js变量

在内容区使用时，使用两个花括号来包裹，如下面的buttonText

在属性值中使用时，属性名的前面要加冒号前缀

<template>
	<view>
		<button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				"buttonText":"按钮",
				"buttondisble":false
			}
		}
	}
</script>

组件的事件以@为前缀，例如@click等等

基础组件

uni-app的组件，分为基础组件和扩展组件。

基础组件列表

基础组件分为以下十几大类：

视图容器（View Container），基础内容（Basic Content），表单组件（Form），路由与页面跳转（Navigation），媒体组件（Media），地图（Map），画布（Canvas），webview（Web-view），广告，页面属性配置，uniCloud

封装扩展组件的优势：

可以将组件进行任意次数的复用。
合理的划分组件，有助于提高应用性能。
代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
组件化开发能大幅度提高应用开发效率、测试性、复用性等。

原生组件和原生插件

#基础组件里的原生组件

uni-app的基础组件里，有一批原生组件，如video、map...

这些组件如果用于vue页面，也就是webview渲染时，会造成层级高于普通前端组件的情况。

它们的层级需要使用cover-view等特殊组件才能覆盖，同时在使用中有些需要注意的事情。

在app-nvue里没有这些问题。

相关文档详见：uni-app内置原生组件说明

如何封装组件

封装组件涉及的知识点较多，相关文档详见：vue组件详解

其他

如果你仍坚持使用微信小程序的自定义组件ui，插件市场也有很多vant weapp版的集成示例DCloud 插件市场。同时要注意，小程序自定义组件的性能不如vue组件。
如果你的nvue文件使用weex编译模式，也支持weex ui。三方商业ui库有graceUI weex版。但weex编译模式属于被淘汰技术，不再提供技术支持，nvue开发请使用uni-app编译模式。

综上，官方对组件的使用建议是：