uni-app组件封装基本知识

这篇具有很好参考价值的文章主要介绍了uni-app组件封装基本知识。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、命名规范

        小写字母,单词用“ - ”链接例如(bj-item , 目录名称和文件名保持一致,官方默认把“ uni- ”开头的 组件全局挂载,不是这种格式的组件需要局部挂载。
1 、“ uni- ”开头的组件官方默认全局挂载
uni-app组件封装基本知识

 2、组件使用

随着Hbuilder的升级,现在组件统一放到uni_modules里面,进行更加规范的存放规则。

在uni_modules下的组件也能够直接上传到插件商城

以前:uni-app组件封装基本知识

使用前还需要进行局部挂载:uni-app组件封装基本知识

 文章来源地址https://www.toymoban.com/news/detail-405402.html

components里面用于存放组件,组件需要建文件夹,且名字和vue页面相同

现在:uni-app组件封装基本知识

建完项目(uni-ui),uni_modules里面防止组件,且不需进行挂载,可以直接使用。

uni-app组件封装基本知识

 

3、直接使用

uni-app组件封装基本知识

 

 二、组件通信

1 、父级向子组件传参(子组件通过 props 接收参数)
uni-app组件封装基本知识uni-app组件封装基本知识

2、监听参数 watch 监听 props 变量)

uni-app组件封装基本知识

 

3 、子组件向父组件传参($emit 回调)

 uni-app组件封装基本知识

uni-app组件封装基本知识 

uni-app组件封装基本知识 

三、父子组件交互

1、父级调用子组件方法($refs) uni-app组件封装基本知识

uni-app组件封装基本知识 

uni-app组件封装基本知识 

 四、插槽(slot)

uni-app组件封装基本知识

 uni-app组件封装基本知识

 

到了这里,关于uni-app组件封装基本知识的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app/vue封装车牌选择器

    先看下效果如下: 代码如下: 父组件: 子组件:(代码较长,css部分没有提供)

    2024年01月18日
    浏览(54)
  • uni-app项目封装http请求和不封装请求

    在页面文件中 该请求的封装方式适用于_gt、_mt类型的请求,应该也可以做到其他类型; 注意看代码中的注释 在uilt/api.js中 在uilt/http.js中 在页面文件中 注意看代码中的注释;不封装需要使用 uni.request这个API来进行请求

    2024年02月13日
    浏览(53)
  • uni-app 封装 websocket 并且监听心跳机制

    新建 socket.js , 将以下代码复制进去 ,向外暴露。 在入口文件中 将 socketIO 挂载在 Vue 原型上 , 也可以按需引入置顶页面 。 在需要用到webSocket的页面中使用如下方法(可根据自身业务需求进行整改) 离开页面,记得断开连接。

    2024年02月11日
    浏览(46)
  • uni-app - 文字上下循环滚动翻滚,类似中奖名单与公告栏信息公示等等,自定义组件封装,支持 DIY(适用于新闻动态、公告上下滚动列表、上下循环滚动,无限上下自动滚动列表)兼容小程序/H5/App

    uni-app是一款使用Vue.js开发所有前端应用的框架,让开发者能够使用Vue.js开发多端应用,具有开发效率高、易学易用、性能优秀、插件丰富、跨平台等优点。今天,我们将介绍如何使用uni-app实现文字上下循环滚动,类似于中奖名单或公告栏信息公示等效果。

    2024年02月12日
    浏览(120)
  • uni-app中调取接口的三种方式与封装uni.request()

    1、uni.request({}) 2、uni.request({}).then() 3、async/await 1、创建一个对象,将该对象挂在Vue的原型下 新建 @/common/request.js 文件 初步写法(仅供参考): 二次更改: 2、进入main.js文件 例:在任意文件中书写下列代码可以调用。 this.$Z.get(); 3、在页面中调用 uniapp的网络请求方法 CODE u

    2024年02月09日
    浏览(49)
  • C++ 命名空间、域、缺省参数、函数重载、引用、auto、内联函数的知识点+完整思维导图+基本练习题+深入细节+通俗易懂建议收藏

            从本章开始我们正式进入到C++的内容,对此如果没有学习过C语言的建议先将C语言系统的学习一遍后再来(已经更新完在专栏就能看到)。 话不多说安全带系好,发车啦 (建议电脑观看) 。 附:红色,部分为重点部分;蓝颜色为需要记忆的部分(不是死记硬背哈,

    2023年04月24日
    浏览(105)
  • uni-app组件概述

    1.1、组件的含义 组件是视图层的基本组成单元。 组件是一个单独且可复用的功能模块的封装。 组件,包括:以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。 component-name 是开始标签, /component-name 是结束标签 开始标签和结束标签之间,称为组件

    2024年02月07日
    浏览(61)
  • Uni-app组件使用

    组件是 视图层的基本组成单元 。是一个单独且 可复用的功能模块的封装 。 组件名称是由尖括号包裹的,可以看成一个语义化标签,是有开始标签和结束标签的。 如下举个简单的例子: uni-card  //这是开始标签 text 这是一个基础卡片示例,内容较少,此示例展示了一个没有任

    2024年02月09日
    浏览(53)
  • uni-app表单组件

    common-form.vue actionList.vue comImage.vue number.vue

    2024年02月16日
    浏览(48)
  • 《uni-app》表单组件-Checkbox组件

    本文分享的checkbox组件为uni-app的内置组件checkbox,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多…没有本质上的区别~ Checkbox,复选框,图形化界面基础组件之一,常用于复选多个选项时的业务场景,如问卷调查业务场景中的多项选择题等; 基

    2024年02月03日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包