目录

uni-app介绍

项目目录

全局外观配置

页面外观配置

配置tabbar

 Condition启动模式配置

组件的基本使用

 uni-app中的样式

基本数据绑定

v-bind动态绑定属性

v-for的使用

uni中的事件

uni中的生命周期

下拉刷新&上拉加载

发送get请求

数据缓存

图片的上传和预览  

条件注释实现跨端兼容

两种方式导航跳转和传参

组件的创建使用和组件的生命周期函数

 组件之间的通讯方式

uni-ui的基本介绍和使用

uni-app介绍

uni-app是一个vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到IOS ,Android.H5以及各种小程序(微信/支付宝/百度/头条/qq/钉钉)等多个平台,即使不跨断,uni-app,同时也是更好的小程序开发框架

为了实现多端兼容,综合考虑编译速度,运行性能等因素,uni-app约定了如下规范

  • 页页面文件遵循 Vue单文件组件(SFC)规范
  • 组件标签靠近小程序规范 参考 uxni-app组件规范
  • 接口能力(JS API)靠近微信小程序规范,但需要将前缀wx 替换为uni 参考uni-app接口规范
  • 数据绑定及事件处理同vue.js规范 同时补充了 app及页面生命周期
  • 为兼容多端运行建议使用flex布局进行开发

项目目录

  • pages:所有页面存放目录
  • static:静态资源目录 例如图片等
  • unpackage:打包之后的文件
  • app.vue是我们的根组件,所有的页面都在App.vue下进行切换,是页面的入口文件,可以调用应用的生命周期函数
  • main.js是我们的项目入口文件,主要是初始化vue实例并使用需要的插件
  • manifest.json 文件应用配置文件,用于指定应用名称,图标权限等
  • pages.json文件用来对 uni-app进行全局配置,决定页面文件路径,窗口样式,原生的导航栏,底部的原生tabber
  • uni.scss. 文件的用途是为了方便整体控制应用的风格,比如按钮颜色,边框风格,uni.scss.预制了一批scss变量预制
  • components 组件存放目录

全局外观配置

page.json-->globalStyle  文档参考uni-app官网

  • navigationBarBackgroundColor :导航栏背景颜色（同状态栏背景色）仅支持16进制
  • navigationBarTextStyle :导航栏标题颜色及状态栏前景颜色，仅支持 黑色白色
  • navigationBarTitleText  导航栏标题文字内容 注意:页面的pages会覆盖全局的
  • enablePullDownRefresh:是否开启下拉刷新，
  • backgroundColor:下拉显示出来的窗口的背景色
  • backgroundTextStyle;"下拉 loading 的样式，仅支持 dark / light
  • onReachBottomDistance:页面上拉触底事件触发时距页面底部距离，单位只支持px，

页面外观配置

创建新的message页面

  1. 右键pages新建message目录 在message目录下 新建vue文件 并选择基本模板
  2. 在pages.json里面配置路径,pages数组中第一项表示应用启动页，
  3. path 配置页面路径 style 配置页面窗口表现

页面配置项

h5 设置编译到 H5 平台的特定样式 Object

pullToRefresh 下拉刷新 color

{
		"path": "pages/message/message",
		"style": {
			"navigationBarTitleText": "信息页",
			"navigationBarBackgroundColor": "#007AFF",
			"h5":{
				"pullToRefresh":{
					"color":"#7D26CD"
				}
			}
		}
	},

配置tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置指定tab栏,以及 tab 切换时显示的对应页

Tips

  • 当设置 position 为 top 时，将不会显示 icon
  • tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序

属性说明

  • color: tab 上的文字默认颜色
  • selectedColor : tab 上的文字选中时的颜色
  • borderStyle: tabbar 上边框的颜色，可选值 black/white
  • list :tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
  • position:可选值 bottom、top

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下

  • pagePath 页面路径，必须在 pages 中先定义
  • text  tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
  • iconPath 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
  • selectedIconPath 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
	"tabBar":{
		"color":"#4CD964",
		"selectedColor":"#007AFF",
		"backgroundColor":"#8F8F94",
		"borderStyle":"white",
		"position":"top",
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/image/car.png",
				"selectedIconPath":"static/image/car-active.png"
			},
			{
				"text":"信息页",
				"pagePath":"pages/message/message",
				"iconPath":"./static/image/home.png",
				"selectedIconPath":"static/image/home-active.png"
			}
		]
	}

 Condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明

currentNumber是当前激活的模式，list节点的索引值
listArray是启动模式列表

list说明

  • name:启动模式名称
  • path:启动页面路径
  • query :启动参数，可在页面的 onLoad 函数里获得

组件的基本使用

uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木,组合各种组件拼接成自己的小程序

uni-app中的组件,就像html中的 div p span 等标签作用一样,用于搭建页面基本结构

1.text文本组件的用法

text组件相当于行内标签,在同一行显示,除了文本节点其他节点都无法长按选中

属性

属性名类型默认值说明平台差异说明
selectableBooleanfalse文本是否可选App、H5、快手小程序
spaceString显示连续空格App、H5、微信小程序
decodeBooleanfalse是否解码App、H5、微信小程序

 space值说明

值说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

2.view视图容器组件用法

view视图容器,类似于HTML中的div

属性

hover-classStringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-timeNumber50按住后多久出现点击态，单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒

 3.button组件的基本使用

属性

sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标

size 有效值

值说明
default默认大小
mini小尺寸

type 有效值

值说明
primary微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式
default白色
warn红色

 4.images组件的基本使用

属性

srcString图片资源地址
modeString'scaleToFill'图片裁剪、缩放的模式

mode 有效值：

缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

 uni-app中的样式

  • rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大
  • 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
  • 支持基本常用的选择器 class id element
  • 在uni-app中不能用*选择器
  • page相当于body
  • 定义在App.vue中的样式为全局样式,作用于每一个页面,在pages目录下的vue文件定义的样式为局部样式,只作用在对应的页面,并会覆盖App.vue中相同的选择器

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
  2. 字体文件大于等于 40kb，，如开发者必须使用，则需自己将其转换为 base64 格式使用
  3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径
 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

如何使用sass或者less

基本数据绑定

在视图中定义数据,和我们之前的vue一模一样,直接在data中定义数据即可

	export default{
		data(){
			return{
				msg: "hello-uni"
			}
		}
	}

插值表达式使用

1.利用插值表达式渲染基本数据

<view>{{msg}}</view>

2.在插值表达式中使用三元运算

	<view>{{flag?'我是真的':'我是假的'}}</view>

3.基本运算

		<view>{{1+1}}</view>

v-bind动态绑定属性

在data中定义一张图片,我们希望这张图片渲染在页面上

export default{
		data(){
			return{
				imgUrl:"https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF"
			}
		}
	}

利用v-bind进行渲染

		<image v-bind:src="imgUrl"></image>

还可以缩写成:

		<image :src="imgUrl"></image>

v-for的使用

data中定义一个数组,最终将数组渲染在页面上

	export default{
	data(){
		return{
			arr:[
				{name:'宋小宝',age:29},
				{name:'赵四',age:29},
				{name:'刘能',age:29},
				{name:'小沈阳',age:29},
			]
		}
	}

利用v-for进行循环

	<view v-for="(item,index) in arr" :key="index">
			序号:{{index}} 姓名:{{item.name}} 年龄:{{item.age}}
	</view>

uni中的事件

事件绑定

在uni中事件绑定和vue是一样的,通过v-on进行事件绑定 也可以简写为@

	<button  @click="show(10, $event)">按钮</button>

事件函数定义在methods中,事件传参:默认如果没有传递参数,事件函数第一个形参为事件对象,如果有形参传递事件对象用 $event 第二个参数为事件对象

	methods:{
			show(num,e){
			console.log('我被点击了', num,e)
		}

uni中的生命周期

应用的生命周期 定义在app.vue里面

生命周期的概念:一个对象从创建,运行,更新,销毁整个过程为生命周期

生命周期函数:在生命周期的每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期

uni-app支持如下应用生命周期

nLaunch当uni-app 初始化完成时触发（全局只触发一次）
onShow当 uni-app 启动，或从后台进入前台显示
onHide当 uni-app 从前台进入后台
onError当 uni-app 报错时触发

 页面生命周期

uni-app支持如下页面生命周期函数

注意

  • onLoad可以接收上一个页面的参数
  • onShow会触发多次,onLoad,onReady不会多次触发
  • tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载

下拉刷新&上拉加载

在页面中定义下拉刷新

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

  • 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
  • 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
onPullDownRefresh监听用户下拉动作，一般用于下拉刷新，参考示例

栗子 

<view v-for="(item,index) in list" :key="index">
			{{item}}
</view>
export default {
		data() {
			return {
				list:['前端','JAVA','UI','大数据','测试']
			}
		},
    	onPullDownRefresh(){
			console.log('触发了页面刷新')
		setTimeout(()=>{
			this.list=[1,2,3,4]
			uni.stopPullDownRefresh()
		},2000)
		},
}

 监听下拉刷新

suni.startPullDownRefresh(OBJECT)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

上拉加载

可以页面触底在请求一屏数据

onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

 栗子

	onReachBottom() {
			this.list=[...this.list,[...'前端','JAVA','UI','大数据','测试']]
		}

发送get请求

uni.request(OBJECT)

发起网络请求。注意:在小程序中网路相关的api在使用前需要配置域白名单         

配置对象参数

urlString是开发者服务器接口地址
dataObject/String/ArrayBuffer否请求的参数App不支持ArrayBuffer类型
headerObject否设置请求的 header，header 中不能设置 Referer。App、H5端会自动带上cookie，且H5端不可手动修改
methodString否GET有效值详见下方说明
timeoutNumber否60000超时时间，单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataTypeString否json如果设为 json，会尝试对返回的数据做一次 JSON.pars
successFunction否收到开发者服务器成功返回的回调函数

 栗子

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = '请求成功';
    }
});

数据缓存

异步

本地存储数据

uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

配置对象参数

keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
successFunction否接口调用成功的回调函数

 栗子

uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('存储成功');
    }
});

 获取本地数据

huni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

参数

keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数，res = {data: key对应的内容}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

 栗子

uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

删除本地数据

uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

参数

keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

 栗子

uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('删除数据');
    }
});

同步

本地存储数据'

uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

参数类型必填说明
keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

  获取本地数据

uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。

try {
    const res = uni.getStorageInfoSync();
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
} catch (e) {
    // error
}

删除本地数据

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

try {
    uni.removeStorageSync('storage_key');
} catch (e) {
    // error
}

图片的上传和预览      

上传

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

注意:count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。

参数

countNumber否最多可以选择的图片张数，默认9见下方说明
sizeTypeArray<String>否original 原图，compressed 压缩图，默认二者都有App、微信小程序、支付宝小程序、百度小程序
sourceTypeArray<String>否album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
successFunction是成功则返回图片的本地文件路径列表 tempFilePaths
failFunction否接口调用失败的回调函数小程序、App
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

 栗子

	<view>
		<button type="default" @click="change">上传图片</button>
		<image v-for="(item,index) in imgArr" :src="item"></image>
	</view>

<script>
	export default{
		data(){
			return{
				imgArr:[]
			}
		},
		methods:{
			change(){
			console.log('上传成功')
				uni.chooseImage({
				    count: 6, //默认9
				    success:res=> {
				    this.imgArr=res.tempFilePaths
				    }
				});
			}
		}
}
</script>

预览

uni.previewImage(OBJECT)

预览图片。

参数

currentString/Number详见下方说明详见下方说明
urlsArray<String>是需要预览的图片链接列表
indicatorString否图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。App
loopBoolean否是否可循环预览，默认值为 falseApp
longPressActionsObject否长按图片显示操作菜单，如不填默认为保存相册App 1.9.5+
successFunction否接口调用成功的回调函数

栗子

<image v-for="(item,index) in imgArr" :src="item" @click="previewImage(item)"></image>
previewImage(current){
				console.log(current)
				uni.previewImage({
					current,
					urls:this.imgArr,
					loop:true,
					indicator:'number'
				})
			}

条件注释实现跨端兼容

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。但每个平台有自己的一些特性因此会存在一些无法跨平台的情况。

  • 大量写 if else，会造成代码执行性能低下和管理混乱。
  • 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台以#ifdef加平台标识开头,以#endif结尾

平台标识

APP-PLUSApp
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-QQQQ小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序

 组件条件注释  代码演示

        <!-- #ifdef H5-->
		<view>我只希望在h5页面显示</view>
		<!-- #endif -->

两种方式导航跳转和传参

1.利用navigator进行跳转

navigator详情文档 : 文档地址

参数

urlString应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-typeStringnavigate跳转方式

open-type有效值

navigate对应 uni.navigateTo 的功能
redirect对应 uni.redirectTo 的功能
switchTab对应 uni.switchTab 的功能
reLaunch对应 uni.reLaunch 的功能字节跳动小程序与飞书小程序不支持
navigateBack对应 uni.navigateBack 的功能

redirect:销毁当前页面,在跳转到下一个页面

跳转到普通页面

	<navigator url="../login/login">跳转至登录页</navigator>

跳转到tabbar页面

	<navigator url="../index/index" open-type="switchTab"> 跳转到首页</navigator>

2.利用编程式导航进行跳转

跳转到普通页面

uni.navigateTo 保留当前页面跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

<button @click="show">跳转到登录页</button>
	methods:{
			show(){
				uni.navigateTo({
					url:'../login/login'
				})
			},

跳转到tabbar页面

uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

	<button type="default"@click="change">跳转到首页</button>
    change(){
				uni.switchTab({
					url:'../index/index'
				})
			}

uni.redirectTo:关闭当前页面，跳转到应用内的某个页面。

3.问号传参 :

同过onLoad(options)接收

	<navigator url="../login/login?id=80&age=19">跳转至登录页</navigator>
		onLoad(options){
			console.log(options)
		},

组件的创建使用和组件的生命周期函数

组件的创建

在uni-app中可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以通过import的方式导入,在通过components进行注册即可

创建luser组件,在component中创建user目录,然后新建user.vue

<template>
	<view class="box">
		这是user组件
	</view>
</template>

<script>
</script>

<style>
</style>

在其他组件中导入该组件并注册

	import user from "../../component/user.vue"
	components:{
			user
		},

组件的生命周期函数

beforeCreate在实例初始化之后被调用。数据,页面都没有
created在实例创建完成后被立即调用。数据方法可以拿到,进行数据的初始化
beforeMount在挂载开始之前被调用。页面还没有渲染,拿不到dom
mounted

挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档

已经有了dom元素可以操作dom

beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。详见仅H5平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见仅H5平台支持
beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。,清除定时器,等方法

 组件之间的通讯方式

1父组件给子组件传值

通过props来接收外界传递到组件内部的值

<template>
	<view>
		我是user组件 
		这是父组件传递到来的{{title}}
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:["title"],
	}
</script>

其他组件使用user组件的时候传递值

<template>
	<view>	
	111111
	<user :title="title" ></user>
	</view>

</template>

<script>
	import user from "../../component/user.vue"
	export default{
		components:{
			user
		},
		data(){
			return{
				title:'hello',
			}
		}
	}
</script>

2.子组件向父组件传值

通过$emit触发事件传递参数

<template>
	<view>
		我是user组件 
		<button type="default" @click="sendNum">给父组件传值</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				num:3
			}
		},
	
	methods:{
		sendNum(){
			console.log('给父组件传值')
			this.$emit('myEven',this.num)
		}
	},
	}
</script>

父组件执行自定义事件接收参数

<template>
	<view>	
	111111
	<user @myEven="getNum"></user>
	这是子组件传递过来的数据{{num}}
	</view>

</template>

<script>
	import user from "../../component/user.vue"
	export default{
		components:{
			user
		},
		data(){
			return{
				num:0
			}
		},
		methods:{
			getNum(num){
				console.log(num)
				this.num=num
			}
		}
		
	}

3.兄弟组件传值

uni.$emit("updataNum",10)  触发全局的自定义事件，附加参数都会传给监听器回调函数。

<template>
	<view>
		这是a组件<button type="default" @click="addNum">修改b组件的数据</button>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				
			}
		},
		methods:{
			addNum(){
				uni.$emit("updataNum",10)
			}
		}
	}
</script>

uni.$on(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。

<template>
	<view>
		这是b组件的数据{{num}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0
			};
		},
		created(){
			uni.$on("updataNum",num=>{
				this.num+=num
			
			})
		}
	}
</script>

uni-ui的基本介绍和使用

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui不包括基础组件，它是基础组件的补充。

hbuilder引入文件 import导入 components注册 cv属性

# 前端 # 小程序 # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue