小程序自定义组件的具体实现+页面与自定义组件间的通信
2018-01-27 16:19
459 查看
具体步骤如下:
1.创建一个组件
图中的singerList就是一个组件,组件为了规范通常放在conponents里。
2.在页面的json文件里引用组件
//想在index.wxml中引用,则对应的index.json要这样配置 { "usingComponents": { "songList":"/components/songList/songList" } }
引用后就可以在wxml文件里用了
//index.wxml ... <songList id='songList'></songlist> ...
标签名字记得对应json文件里的对应的组件的key值
3.使用组件的方法和属性
组件内定义了一个fun的方法//songList.js Component({ ... methods: { fun(v){ console.log(v) } } ... })
在页面里可以这样调用
Page({ ... onready(){ this.singList = this.selectComponent("#singList"); this.singList.fun("value"); //value } ... })
4.页面传值/方法到组件
页面里这样配置//index.wxml ... <songList id='songList' value1='str' value2='{{obj}}' bind:action:'exFun' //exFun是你想要在组件里调用的方法名 > </songlist> ...
//index.js Page({ data:{ obj:{ a:"one", b:"two" } }, exFun(v){ console.log(v) } })
组件里这样使用
Component({ ... properties: { //配置页面传过来的值,key值要一一对应 'value1':{ type:String, //必填,目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value:"" //可选,默认值,如果页面没传值过来就会使用默认值 }, 'value2':{ type:Object, //必填,目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value:"" //可选,默认值,如果页面没传值过来就会使用默认值 } }, methods(){ fun(){ this.triggerEvent("action"); //triggerEvent函数接受三个值:事件名称、数据、选项值 } } ... })
当调用fun()时,则会执行index.js里的exFun
相关文章推荐
- 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
- Windows用户自定义消息实现程序间通信
- 微信小程序之自定义组件的实现代码(附源码)
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面
- 小程序自定义组件实现城市选择功能
- 使用微信小程序自定义组件实现的tabs选项卡功能
- 手把手教你实现微信小程序中的自定义组件
- 使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
- 微信小程序自定义select下拉选项框组件的实现代码
- 微信小程序自定义组件实现tabs选项卡功能
- 手把手教你实现小程序中的自定义组件
- 小程序学习笔记四:页面文件详解之视图层组件与自定义组件
- 微信小程序自定义组件简单实现
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- dql组件结果页面实现自定义效果
- ecshop中自定义页面的分页实现使用ecs自带分页程序
- 开发 | 手把手教你实现微信小程序中的自定义组件
- 使用 Socket 通信实现 FTP 客户端程序
- 用js+iframe形成页面的一种遮罩效果的具体实现
- 在Delphi 中用程序实现自定义窗体的创建和显示顺序(1)