component(组件)

component(组件)是视图层的基本组成单元。component 是一个单独功能模块的封装。

一个 component 包括开始标签和结束标签,标签上可以写属性,并对属性赋值。内容则写在两个标签之内。

  • 根节点为 <template>。
  • 根节点 <template> 下只能有一个根 <view> 组件。
  • 一个组件的 data 选项必须是一个函数。

index.vue:

						
<!-- 在 index.vue 页面引用 user-info 组件 -->
<template>
  <view>
    <user-info></user-info>
  </view>
</template>
						
					

userinfo.vue:

						
<!-- 在 userinfo.vue 页面配置 user-info 组件 -->
<template>
  <view>
    <view>{{ userName }}</view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        "userName": 'wanghao'
      }
    }
  }
</script>
						
					

说明:

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

注册 component

在注册一个组件的时候,始终需要给它一个名字,以便于引用。 定义组件名的方式有两种:

  • 使用 kebab-case (短横线分隔命名)

    当使用 kebab-case (短横线分隔命名) 定义一个 component 时,必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>。

  • 使用 PascalCase(首字母大写命名)

    当使用 PascalCase (首字母大写命名) 定义一个 component 时,在引用这个自定义元素时两种命名法都可以使用。 也就是 <my-component-name> 和 <MyComponentName> 都是可接受的。

在 uni-app 工程根目录下的 components(组件) 目录,创建并存放自定义组件:

  • components
    //符合 vue 组件规范的 uni-app 组件目录
    • componentA
      //符合 components/组件名称/组件名称.vue 目录结构,easycom 方式可直接使用组件
      • componentA.vue
        //可复用的 componentA 组件
    • component-a.vue
      //可复用的 component-a 组件

全局注册

uni-app 支持配置全局组件,需在 main.js 里进行全局注册,注册后就可在所有页面里使用该组件。

注意:

  • Vue.component 的第一个参数必须是静态的字符串。
  • nvue 页面暂不支持全局组件。

main.js 里进行全局导入和注册:

						
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head', pageHead)
						
					

index.vue 里可直接使用组件:

						
<template>
  <view>
    <page-head></page-head>
  <view>
</template>
						
					

局部注册

局部注册之前,在需要引用该组件的页面,导入需要使用的组件。

页面引入组件方式

传统 vue

传统 vue 规范:在 index.vue 页面中,通过 import 方式引入组件 ,在 components 选项中定义需要使用的组件。

						
<!-- 在 index.vue 引入 uni-badge 组件 -->
<template>
  <view>
    <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
  </view>
</template>
<script>
  import uniBadge from '@/components/uni-badge/uni-badge.vue';//1.导入组件(这步属于传统 vue 规范,但在 uni-app 的 easycom 下可以省略这步)
  export default {
    components: { uniBadge }//2.注册组件(这步属于传统 vue 规范,但在 uni-app 的 easycom 下可以省略这步)
  }
</script>
						
					

说明:

easycom

通过 uni-app 的 easycom:将组件引入精简为一步。只要组件安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册,直接在页面中使用。

					
<!-- 在 index.vue 引入 uni-badge 组件 -->
<template>
  <view>
    <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
  </view>
</template>
<script>
  //这里不用 import 引入,也不需要在 components 内注册 uni-badge 组件。 template 里就可以直接使用。
  export default {
    data() {
      return {

      }
    }
  }
</script>
					
				

说明:

组件是 vue 技术中非常重要的部分,组件使得与 UI 相关的轮子可以方便的制造和共享,进而使得 vue 使用者的开发效率大幅提升。uni-app 搭建了组件的插件市场,有很多现成的组件,若下载符合 components/组件名称/组件名称.vue 目录结构的组件,均可直接使用。

uni-app 只支持 vue 单文件组件(.vue 组件)。其他的诸如:动态组件,自定义 render ,和 <script type="text/x-template"> 字符串模版等,在非 H5 端不支持。

属性 props

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

props 选项
选项类型说明
typeString
Number
Boolean
Array
Object
Data
Function
Symbol
任何自定义构造函数、或上述内容组成的数组会检查一个 prop 是否是给定的类型,否则抛出警告
defaultany为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
requiredboolean定义该 prop 是否是必填项。
validatorfunction自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 falsy 的值 (也就是验证失败),一个控制台警告将会被抛出。

components/componentA/componentA.vue:

						
<template>
  <view>
    <!-- 我是子组件 componentA -->
    <view>{{ age }}</view>
  </view>
</template>
<script>
  export default {
    props: {
      //检测类型+其他验证
      age: {
        type: Number,
        default: 0,
        required: true,
        validator: function(value) {
          return value >= 0
        }
      }
    }
  }
</script>
						
					
						
<template>
  <view>
    <!-- 我是父组件 -->
    <componentA :age="10"></componentA>
  </view>  
</template>