Vue 組件支持

組件

Vue 組件

組件是 vue 技術(shù)中非常重要的部分，組件使得與ui相關(guān)的輪子可以方便的制造和共享，進(jìn)而使得vue使用者的開發(fā)效率大幅提升。

uni-app搭建了組件的插件市場(chǎng)，可大幅提升開發(fā)者的效率。https://ext.dcloud.net.cn/

在項(xiàng)目的/component目錄下存放組件，在要顯示組件的頁面中則分為3步：導(dǎo)入、注冊(cè)和使用。

可以這個(gè)評(píng)分組件的使用為例，了解vue組件的使用方式。

<template>
    <view>
        <uni-rate value="2"></uni-rate> <!-- 第三步，使用組件。并傳值點(diǎn)亮2顆星 -->
    </view>
</template>
<script>
import uniRate from "@/components/uni-rate/uni-rate.vue" //第一步，導(dǎo)入組件
export default {
    components: {
        uniRate //第二步，注冊(cè)組件
    }
}
</script>

• 2.5.0+版本支持在pages.json內(nèi)引入組件，詳見
• uni-app只支持vue單文件組件（.vue 組件）。其他的諸如：動(dòng)態(tài)組件，自定義 render，和<script type="text/x-template"> 字符串模版等，在非H5端不支持。

詳細(xì)的非H5端不支持列表：

• Slot（scoped 暫時(shí)還沒做支持）
• 動(dòng)態(tài)組件
• 異步組件
• inline-template
• X-Templates
• keep-alive
• transition （可使用 animation 或 CSS 動(dòng)畫替代）
• 老的非自定義組件編譯模式不支持在組件引用時(shí)，在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class style 等樣式屬性(例：<card class="class-name"> </card> 樣式是不會(huì)生效的)。建議更新為自定義組件模式
• 老的非自定義組件編譯模式組件里使用 slot 嵌套的其他組件時(shí)不支持 v-for。建議更新為自定義組件模式

Vue官方文檔參考：組件 。

uni-app內(nèi)置基礎(chǔ)組件

uni-app 內(nèi)置了小程序的所有組件，比如： 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">
      當(dāng)前選擇: {{date}}
    </view>
</picker>

全局組件

uni-app 支持配置全局組件，需在 main.js 里進(jìn)行全局注冊(cè)，注冊(cè)后就可在所有頁面里使用該組件。

注意

• Vue.component 的第一個(gè)參數(shù)必須是靜態(tài)的字符串。
• nvue頁面暫不支持全局組件

示例

main.js 里進(jìn)行全局導(dǎo)入和注冊(cè)

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 中以下這些作為保留關(guān)鍵字，不可作為組件名。

• 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

• 除以上列表中的名稱外，標(biāo)準(zhǔn)的 HTML 及 SVG 標(biāo)簽名也不能作為組件名。
• 在百度小程序中使用時(shí)，不要在 data 內(nèi)使用 hidden ，可能會(huì)導(dǎo)致渲染錯(cuò)誤

常見問題

1. 如何獲取上個(gè)頁面?zhèn)鬟f的數(shù)據(jù)

在 onLoad 里得到，onLoad 的參數(shù)是其他頁面打開當(dāng)前頁面所傳遞的數(shù)據(jù)。

2. 如何設(shè)置全局的數(shù)據(jù)和全局的方法

uni-app 內(nèi)置了 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 使用時(shí)：
import {mapState,mapMutations} from 'vuex'

3. 如何捕獲 app 的 onError

由于 onError 并不是完整意義的生命周期，所以只提供一個(gè)捕獲錯(cuò)誤的方法，在 app 的根組件上添加名為 onError 的回調(diào)函數(shù)即可。如下：

export default {
   // 只有 app 才會(huì)有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },

   // 捕獲 app error
   onError (err) {
       console.log(err)
   }
}

4. 組件屬性設(shè)置不生效解決辦法

當(dāng)重復(fù)設(shè)置某些屬性為相同的值時(shí)，不會(huì)同步到view層。 例如：每次將scroll-view組件的scroll-top屬性值設(shè)置為0，只有第一次能順利返回頂部。 這和props的單向數(shù)據(jù)流特性有關(guān)，組件內(nèi)部scroll-top的實(shí)際值改動(dòng)后，其綁定的屬性并不會(huì)一同變化。

解決辦法有兩種（以scroll-view組件為例）：

• 監(jiān)聽scroll事件，記錄組件內(nèi)部變化的值，在設(shè)置新值之前先設(shè)置為記錄的當(dāng)前值

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

• 監(jiān)聽scroll事件，獲取組件內(nèi)部變化的值，實(shí)時(shí)更新其綁定值

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

第二種解決方式在某些組件可能造成抖動(dòng)，推薦第一種解決方式。