Vue 组件支持

组件

Vue 组件

组件是 vue 技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升。

uni-app搭建了组件的插件市场，可大幅提升开发者的效率。DCloud 插件市场

在项目的/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>

• 2.5.0+版本支持在pages.json内引入组件，详见
• uni-app只支持vue单文件组件（.vue 组件）。其他的诸如：动态组件，自定义 render，和<script type="text/x-template"> 字符串模版等，在非H5端不支持。

详细的非H5端不支持列表：

• Slot（scoped 暂时还没做支持）
• 动态组件
• 异步组件
• inline-template
• X-Templates
• keep-alive
• transition （可使用 animation 或 CSS 动画替代）
• 老的非自定义组件编译模式不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name"> </card> 样式是不会生效的)。建议更新为自定义组件模式
• 老的非自定义组件编译模式组件里使用 slot 嵌套的其他组件时不支持 v-for。建议更新为自定义组件模式

Vue官方文档参考：组件 。

uni-app内置基础组件

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 里进行全局注册，注册后就可在所有页面里使用该组件。

注意

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

命名限制

在 uni-app 中以下这些作为保留关键字，不可作为组件名。

• a
• canvas
• cell
• content
• countdown
• datepicker
• div
• element
• embed
• header
• image
• img
• indicator
• input
• link
• list
• loading-indicator
• loading
• marquee
• meta
• refresh
• richtext
• script
• scrollable
• scroller
• select
• slider-neighbor
• slider
• slot
• span
• spinner
• style
• svg
• switch
• tabbar
• tabheader
• template
• text
• textarea
• timepicker
• transition-group
• transition
• video
• view
• web

Tips

• 除以上列表中的名称外，标准的 HTML 及 SVG 标签名也不能作为组件名。
• 在百度小程序中使用时，不要在 data 内使用 hidden ，可能会导致渲染错误

常见问题

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事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值

  <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事件，获取组件内部变化的值，实时更新其绑定值

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

  第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。