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

项目部002

7.1 什么是组件？

• 组件是视图层的基本组成单元。
• 组件是一个单独且可复用的功能模块的封装。

注：按照vue单文件组件规范，每个vue文件的根节点必须为 <template>，且这个 <template> 下只能且必须有一个根 <view> 组件。

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

• 以组件名称为标记的开始标签和结束标签

注意：所有组件与属性名都是小写，单词之间以连字符-连接。

• 组件内容
• 组件属性、组件属性值。

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

一个基本组件的实例，在一个vue页面的根<view>组件下插入一个<button>组件。给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“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内置组件，随时可以直接使用，比如<view>组件。

查看官方例程： 新建项目时选择 - 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'

<template>
    <view>
        <button size="mini" @click="goto('/pages/about/about')">按钮</button>
    </view>
</template>
<script>
    export default {
        methods: {
            goto(url) {
                console.log("按钮被点击了，且传入的参数是：" + url)
            }
        }
    }
</script>

---

本课引用链接：

https://uniapp.dcloud.io/component/

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

home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流，请到： https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群：[326576256]

视频教程在线观看：https://www.eyuyan.tv/?mod=play&tvid=3219

从GIT关注：
https://gitee.com/JYtechnology/uniapp-learn

躲猫猫啊

学习了学习了