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'

 如何捕獲 app 的 onError

由於 onError 並不是完整意義的生命週期，所以只提供一個捕獲錯誤的方法，在 app 的根元件上新增名為 onError 的回撥函式即可。如下：

export default {  
 // 只有 app 才會有 onLaunch 的生命週期
   onLaunch () {      
      // ...
   },   
      // 捕獲 app error
   onError (err) {    
         console.log(err)
   }
}

. 元件屬性設定不生效解決辦法

當重複設定某些屬性為相同的值時，不會同步到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
        }
    }
}

第二種解決方式在某些元件可能造成抖動，推薦第一種解決方式。