组件Vue 组件 组件是 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>
- 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
}
}
}
第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。
|