uni-app概要 |
通过 HBuilderX 可视化界面 |
通过 HBuilderX发布为小程序 |
通过vue-cli命令行运行uni app项目 |
框架简介 |
使用Vue.js注意事项 |
uni-app 常见问题 |
当前阅读教程:Uni-app入门教程 > uni-app Vue 组件 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: uni-app 表单控件绑定 | 下一篇: uni-app 常见问题 |
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> l 2.5.0+版本支持在pages.json内引入组件 l uni-app只支持vue单文件组件(.vue 组件)。其他的诸如:动态组件,自定义 render,和<script type="text/x-template"> 字符串模版等,在非H5端不支持。 详细的非H5端不支持列表:l Slot(scoped 暂时还没做支持) l 动态组件 l 异步组件 l inline-template l X-Templates l keep-alive l transition (可使用 animation 或 CSS 动画替代) l 老的非自定义组件编译模式不支持在组件引用时,在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例:<card> </card> 样式是不会生效的)。建议更新为自定义组件模式 l 老的非自定义组件编译模式组件里使用 slot 嵌套的其他组件时不支持 v-for。建议更新为自定义组件模式
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> 当前选择: {{date}} </view> </picker> 全局组件uni-app 支持配置全局组件,需在 main.js 里进行全局注册,注册后就可在所有页面里使用该组件。 注意 l Vue.component 的第一个参数必须是静态的字符串。 l 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 中以下这些作为保留关键字,不可作为组件名。 l a l canvas l cell l content l countdown l datepicker l div l element l embed l header l image l img l indicator l input l link l list l loading-indicator l loading l marquee l meta l refresh l richtext l script l scrollable l scroller l select l slider-neighbor l slider l slot l span l spinner l style l svg l switch l tabbar l tabheader l template l text l textarea l timepicker l transition-group l transition l video l view l web 注意 l 除以上列表中的名称外,标准的 HTML 及 SVG 标签名也不能作为组件名。 l 在百度小程序中使用时,不要在 data 内使用 hidden ,可能会导致渲染错误 |
|
上一篇: uni-app 表单控件绑定 | 下一篇: uni-app 常见问题 |