【零基础学会uniapp系列】7、 组件（库）的使用

【零基础学会uniapp系列】7、 组件（库）的使用

7.1 什么是组件？
组件是视图层的基本组成单元。
组件是一个单独且可复用的功能模块的封装。
注：按照vue单文件组件规范，每个vue文件的根节点必须为 ，且这个 下只能且必须有一个根 组件。

每个组件，包括如下几个部分：

• 以组件名称为标记的开始标签和结束标签
• 注意：所有组件与属性名都是小写，单词之间以连字符-连接。
• 组件内容
• 组件属性、组件属性值。

<template>
    <view>
        <button size="mini" @click="onclicked">按钮</button>
    </view>
</template>

一个基本组件的实例，在一个vue页面的根组件下插入一个组件。给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”，然后又绑定了点击的事件，该事件会触发methods中的onclicked方法。

组件的属性类型

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

公共属性列表
每个组件都有各自定义的属性，但所有uni-app的组件，都有如下属性：

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

基础组件列表
基础组件是由Uniapp官方提供的组件，这些是运行的最基本组件，提供了界面显示的基本功能。

基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需zc内置组件，随时可以直接使用，比如组件。

查看官方例程： 新建项目时选择 - Hello uni-app 来进行选择

组件的学习方式

• 0、 查看组件库兼容性
• 1、 查看组件的例程
• 2、 查看组件的文档

在组件中使用data或js变量
组件中可以使用script的data中定义的js变量，但组件的属性中使用和内容区使用的用法不一样。

在内容区使用时，使用两个花括号来包裹，如下面的{{buttonText}}
在组件的属性中使用时，属性前面需增加:(v-bind)前缀，属性值仍使用引号包裹

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

组件的事件
每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。

比如button组件，有点击事件，也就是当手机用户点击这个button组件时，会触发这个事件。

事件也是组件的属性，只不过这类属性以@为前缀。

事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。

下面是组件事件的示例：

• click是button组件的点击事件，在用户点击这个button时触发
• click指向了methods中定义的goto方法，并且传递了一个参数’/pages/about/about’

本课引用链接：

• https://uniapp.dcloud.io/component/
• vue单文件组件规范 : https://cn.vuejs.org/v2/guide/single-file-components.html