组件使用的入门教程

• 组件是视图层的基本组成单元。

• 组件是一个单独且可复用的功能模块的封装。

每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

• 组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的<后面用/来表示结束。结束标签也称为闭合标签。如下面示例的<component-name>是开始标签，</component-name>是结束标签。

• 在开始标签和结束标签之间，称为组件内容。如下面示例的content

• 开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的property1和property2。注意闭合标签上不能写属性。

• 每个属性通过=赋值。如下面的示例中，属性property1的值被设为字符串value。

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

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

下面是一个基本组件的实例，在一个vue页面的根<view>组件下插入一个<button>组件。给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”。

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

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

通过了解button组件的文档，我们知道上述代码将在页面中绘制一个按钮，按钮显示的文字是“按钮”，按钮的大小是小尺寸的。

#组件的属性类型

组件的属性，有多种类型：

下面的例子演示了组件的属性设置boolean值和数字的例子。注意false作为一个js变量，在组件的属性中使用时，属性前面需增加:冒号前缀，属性值仍使用引号包裹，但引号里不是字符串，而是js。

<template>
	<view>
		<button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
	</view></template>

#公共属性列表

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

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

#在组件中使用js变量

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

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

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

下面的button组件示例，等价于上一个的示例。只不过静态内容改成动态js。

<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>

#基础组件

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

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

除了基础组件，都称为扩展组件。扩展组件需要将组件导入项目中才可以使用。

uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素。

但uni-app的组件与HTML不同，而是与小程序相同，可更好的满足手机端的使用习惯。

虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。

uni-app 基础组件规范，与小程序规范相近。如果了解小程序开发的话，uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

	<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
		<view class="picker">
		  当前选择: {{date}}		</view>
	</picker>

#基础组件列表

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

视图容器（View Container）：

基础内容（Basic Content）：

表单组件（Form）：

路由与页面跳转（Navigation）：