mpvue自定义组件
创建自定义组件
类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件):
.json (不能有注释语句)
{"component": true,// 自定义组件声明"usingComponents": {//可引用其他组件}
}
在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。
.js
外部样式属性:externalClasses 可以是 1个或多个 (string or array)
Component({externalClasses: ['custom-class'],//多个['one-class','two-class']properties: {// 这里定义了innerText属性,属性值可以在组件使用时指定,子父级传参数value: { //属性type: String, //类型value: 'default value',//默认值}},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法 ,子父级传参数customMethod() {}}
})
.wxml
在组件标签里写上class
<view class="custom-class "></view>
.vue
在使用组件的页面里的标签里 写上属性要对应的class类名
<k-view :custom-class = "my-class"></view>
细节注意事项
一些需要注意的细节:
- 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
- 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。
- 自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。
注意,是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异,包括:
- 使用 usingComponents 页面的原型与不使用时不一致,即 Object.getPrototypeOf(this) 结果不同。
- 使用 usingComponents 时会多一些方法,如 selectComponent 。
- 出于性能考虑,使用 usingComponents 时, setData 内容不会被直接深复制,即 this.setData({ field: obj }) 后 this.data.field === obj。(深复制会在这个值被组件间传递时发生。)
如果页面比较复杂,新增或删除 usingComponents 定义段时建议重新测试一下。
mpvue自定义组件相关推荐
- app vue 真机运行_uni-app黑魔法:小程序自定义组件运行到H5平台
引言 移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
- uniapp自定义导航栏,高度,自定义组件
设置自定义导航栏 :globalStyle 内 navigationStyle": "custom" 配置页面:pages.json "globalStyle& ...
- 【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定
子组件sg-component.vue代码 <template><div class="sg-component"><button @click=&q ...
- vue自定义组件 → 场馆预约の小时范围控件【手到擒来】
组件pages/components/sg-hour-range.vue <template><ul><liv-for="(item, $index) in h ...
- 微信小程序自定义轮播图滚动样式 自定义组件轮播图的实现
效果图: 实现代码: wxml <view class="card card_b"><swiper autoplay="{{true}}" i ...
- 微信小程序自定义组件之Picker组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 需求: 通过JS条件判断,满足条件就弹出Picker给用户选择一个数组里面的数据. 有些朋友可能会有疑问: 1 ...
- 【一步步学小程序】3. 使用自定义组件(component)
上一节创建了一个包含多个课程数据的列表.这一节我们用自定义组件(component),来优化列表页面,即如图,我们把每个课程单元格封装为组件. 使用组件的好处: 自定义组件可以在不同的页面中重复使用 ...
- java requiredstringvalidator_如何访问自定义组件中的Validator.required
我需要一些帮助 . 我正在尝试创建一个包装下拉值的自定义组件,并根据是否需要显示/隐藏默认的--Select--选项 . (我想稍后将其他自定义逻辑应用于此组件) 如何通过父级的被动形式设置我的自定义 ...
- php自定义控件,小程序自定义组件的实现方法(代码)
本篇文章给大家带来的内容是关于小程序自定义组件的实现方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. File:threecolgrid.js// components/t ...
最新文章
- 切换debian8系统语言环境
- php爬取flash的交互数据库,基于PHP的Flash与MySQL数据库通讯的实现
- 连载:面向对象葵花宝典:思想、技巧与实践(34) - DIP原则
- 营销管理手册_某连锁动物医院营销管理咨询项目方案成功汇报
- php ext_skel,用ext_skel为php开发扩展|待更
- java怎样定义和使用数组,Java一维数组的定义和使用
- ----发现一款可以代替双手的软件 “按键精灵”
- 基于Matlab的极限学习机(ELM)实现
- OpenCV简单应用(一、摄像头拍照)
- 让Fireball CodeEditor控件禁止中文双倍输入
- Java 基础系列(七) --- 透彻学习Java的接口
- android系统裁剪之APP精简
- Ubuntu 安装微信客户端
- Spring boot 整合Spring Security Jwt
- ubuntu18.04安装时ACPI error 无法进入系统的问题
- mybatis在实际项目中常见的排坑配置
- 如果自己的微信被对方删除,微信会有哪些提示?
- word固定行距mathtype显示不全问题解决方法
- 机器人的编程语言是什么语言
- 【嵌入式数据库原理与应用笔记】介绍,系统结构
热门文章
- java中的编译时异常和运行时异常
- java计算机毕业设计京津冀地区产学研项目管理信息系统2021MyBatis+系统+LW文档+源码+调试部署
- html 引用全局变量,全局变量在整个源程序文件中都有效
- 2021开学平价蓝牙耳机推荐,实惠好用的蓝牙耳机盘点
- autojump一键直达目录在某些linux版本上失效的问题
- 美国移动运营商ATT服务故障,导致大范围用户无法寻求紧急救助服
- Java 修饰符 public/private/protected/不写的区别
- mysql导入数据表越来越慢_MySQL导入数据非常慢的解决办法
- discuz文件restore.php,Discuz数据库备份以及恢复
- PVGeo 离散点集连接成线(最短路径)