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>
课程视频教程：
Uniapp问答互助学习交流群：
旨在相互学习交流，相互帮助解答使用Uniapp时遇到的问题
