位置:电子教程 > Uni-app入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
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  Slotscoped 暂时还没做支持)

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"

示例

小白教程网www.2d5.net

<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页面暂不支持全局组件

示例

小白教程网www.2d5.net

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 常见问题
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)