小程序自定义组件
2023-09-11 14:14:25 时间
-
创建组件
-
页面引入组件
在页面的json中添加组件
"usingComponents": {
"custombar": "../../components/custombar/custombar"
},
在页面的wxml中添加组件
<custombar></custombar>
-
页面向组件传值
在组件的js中,向properties添加接收传值的属性
// components/custombar.js
Component({
/**
* 组件的属性列表
*/
properties: {
title: String
},
})
页面的wxml中在组件标签上直接写需要传递的值
<custombar title="hello"></custombar>
组件的wxml中将传进来的值展示
<text>{{title}}</text>
-
组件的自定义事件
组件添加点击事件
<view class="button" bindtap="shareClick">点击事件</view>
点击事件里注册自定义事件 this.triggerEvent(“myevent”, {data:‘子组件像父页面传递的参数’});
Component({
...
/**
* 组件的方法列表
*/
methods: {
shareClick: function(e) {
console.log("shareClick");
this.triggerEvent("share", {data: 'share'});
},
}
})
在页面引入的组件标签上绑定自定义事件
<custombar bindshare="shareClick2" title="分享"/>
页面处理组件传递过来的参数
Page({
...
shareClick2: function(e) {
console.log(e.detail);
console.log('shareClick');
}
})
-
页面form提交获取组件的值
设置behaviors为wx://form-field 可以使自定义组件有类似于表单控件的行为。
组件添加behaviors和value属性
Component({
behaviors: ['wx://form-field'],
properties: {
value: String,
},
组件wxml提交form
<form bindsubmit="buttonClick">
<custombar title="hello" value="{{username}}"></custombar>
<button class="button" formType="submit">提交</button>
</form>
即可拿到组件的value
buttonClick: function (e) {
let params = e.detail.value
console.log(params)
}
-
页面调用组件方法
组件定义方法
Component({
methods: {
showDialog: function () {
this.setData({
isShowDialog: true,
});
},
}
})
页面WXML
<custombar id="custombar" />
页面JS
manageClick: function (e) {
let component = this.selectComponent('#custombar')
component.showDialog();
},
相关文章
- 微信小程序 - 超出文字省略组件
- 微信小程序 - radio/checkbox自定义组件
- 微信小程序 - 自定义components组件详解A篇
- 微信小程序-自定义组件
- 【小程序】通过scroll-view组件实现左右【滑动】列表
- 【微信小程序】-- 自定义组件 - behaviors(三十九)
- 【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
- 微信小程序 - 实现文本展开与收起功能组件(初始时隐藏文字内容,当点击查看更多时展开)点击隐藏和点击显示 / 折叠与展开 / 大段文本内容过多,实现折叠与展开效果 ,超详细代码注释文章教程源码插件
- 微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数(页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容)
- uni-app - 在纯 JS 文件中调用自定义弹框组件 / 封装全局 API 调用弹框组件(解决小程序、APP 无法使用 document.body.appendChild 插入组件节点)适配全端
- uni-app - 文本展开 / 收起折叠功能,支持自定义样式(当文本内容超出规定行数后,展开收起折叠的功能)兼容 H5 / App / 小程序且易用更容易修改的插件组件源码,超详细的示例代码及注释
- C#操作Word Aspose.Words组件介绍及使用 基本介绍与DOM概述
- 微信小程序父子组件之间传值
- 微信小程序组件 自定义多选
- 微信小程序组件 360
- 微信小程序组件 自定义弹出框
- SwiftUI 组件之优雅展示程序开源项目的组件List收起与展开(教程含源码)
- 【小程序】微信小程序自定义组件Component详细总结
- 微信小程序自定义组件的坑之 hidden、boolean 属性和花括号
- 微信小程序学习第9天——自定义组件的生命周期与组件所在页面的生命周期
- 微信小程序学习第8天——自定义组件的数据监听器Observer小案例
- 学习旧岛小程序 (2) 自定义组件
- 微信小程序swiper组件实现图片宽度自适应