uni-app组件的使用方法

uni-app：引用官方文档的介绍，

uni-app

 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。对于有vue经验的开发者来说，是非常容易上手的。

在官网可以了解到。使用uni-app开发vue项目，有些组件并不支持其他平台，比如微信小程序等。

内置组件

Vue 内置组件	H5	App端旧版	App端V3	微信小程序	说明
component	支持	不支持	支持	不支持	-
transition	支持	不支持	不支持	不支持	-
transition-group	支持	不支持	不支持	不支持	-
keep-alive	支持	不支持	支持	不支持	-
slot

uni-app组件复用也是三步骤：自定义组件、在页面注册、使用。

自定义组件：

官方文档非常推荐使用uni-组件名的命名方法。

如：在components目录下，新建目录

uni-nav-bar是自定义的搜索框。

在需要使用的vue页面当中来引入自定义好的组件。

[code]import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

注册使用：

[code]components:{
uniNavBar,
uniBadge
}

最后关于组件的通信，其实和vue的组件通信区别不大。

通过props接收数据、子组件自定义事件传参方式让父组件接收。

• 点赞
• 收藏
• 分享
• 文章举报

默默无闻的IT搬运工 发布了1 篇原创文章 · 获赞 0 · 访问量 195 私信 关注