组件是 vue 技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升。
uni-app搭建了组件的插件市场，可大幅提升开发者的效率。https://ext.dcloud.net.cn/
在项目的/component目录下存放组件，在要显示组件的页面中则分为3步：导入、注册和使用。
可以这个评分组件的使用为例，了解vue组件的使用方式。
<template>
<view>
<uni-rate value="2"></uni-rate> <!-- 第三步，使用组件。并传值点亮2颗星 -->
</view>
</template>
<script>
import uniRate from "@/components/uni-rate/uni-rate.vue" //第一步，导入组件
export default {
components: {
uniRate //第二步，注册组件
}
}
</script>
详细的非H5端不支持列表：
Vue官方文档参考：组件 。
uni-app 内置了小程序的所有组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"
示例
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。
注意
示例
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>
在 uni-app 中以下这些作为保留关键字，不可作为组件名。
Tips
1. 如何获取上个页面传递的数据
在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。
2. 如何设置全局的数据和全局的方法
uni-app 内置了 vuex，在app里的使用，可参考hello-uniapp store/index.js。
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
store,...
})
...
//test.vue 使用时：
import {mapState,mapMutations} from 'vuex'
3. 如何捕获 app 的 onError
由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：
export default {
// 只有 app 才会有 onLaunch 的生命周期
onLaunch () {
// ...
},
// 捕获 app error
onError (err) {
console.log(err)
}
} 4. 组件属性设置不生效解决办法
当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。
解决办法有两种（以scroll-view组件为例）：
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
}
}
} <scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
export default {
data() {
return {
scrollTop: 0,
}
},
methods: {
scroll: function(e) {
this.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = 0
}
}
} 第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。