前言:
其实之前就想写这个的,因为我觉得这么模块化的框架,组件之间通信是非常重要的,也是最经常用到的一块儿,
只是之前在项目里一直没用到跨组件通信,现在用到了,也会用了,就一起写出来得了 :)
一、父、子组件之间的通信
注:首先我们先将子组件在父组件中注册,并且在父组件上使用!!! 1.创建组件: 在微信开发者工具中,我们可以直接创建组件; 先右键创建一个文件夹,然后在创建的这个文件夹上右键,新建Component; 这样就成功的创建了一个组件; 2.在父组件中注册,并使用: 首先,我们去到父组件中的.json文件中,在"usingComponents"中进行注册 例: "usingComponents":{ "自定义name":"子组件的路径(可以是绝对路径,也可以是相对路径)" } 注册完之后,我们就可以使用了,在父组件的.wxml文件中,直接使用 例: <b-detail-swiper /> (里面填的就是我们在注册时,起的自定义name)
----------------------------华丽的分割线-------------------------------
1.父组件向子组件传递数据 父组件向子组件传递数据,可以传递number、array、object、string等数据 以上传递是数据是在项目中常用的,当然null跟undefined也是可以传递的 举个例子吧:我们要像轮播图组件中传递几张图片 注:imgList是我们自定义的名字,也是要在子组件中接收的名字 {{imgList}}中的imgList是我们父组件中js文件中data中的数据 例:<b-detail-swiper imgList="{{imgList}}" />
-----------------上面的代码就是我们父组件向子组件传递数据的过程--------------------
父组件中传递了数据,子组件中就要接收参数 子组件中的.js文件中有一个Component对象,在这个对象中有一个properties的对象 例子:properties:{ imgList:{ type:Array //type: 数据类型(根据传递过来的数据进行填写) value:[] //value:默认值(当你没有传递值的时候,就使用value中的值,类似default) } } 这样就接收到了父组件传递过来的数据,在子组件中的.wxml文件中使用mastache语法:{{imgList}}引用
2.子组件向父组件传递自对应事件 举个例子:我们在子组件中的wxml中,使用bind:tap监听了一个onClick方法 在.js文件中的Component对象中的methods中使用onClick方法 在onClick方法使用triggerEvent发送自定义事件 例:methods:{ onClick(){ console.log('监听到点击事件') const index = 1 this.triggerEvent("handleClick",{index},{}) } } //trigerEvent("method-name",{index},{}); 该方法有3个参数:第一个参数:方法名,第二个参数:要传递的数据, 重点:第三个参数:没有用过,不是很了解,希望有无意或有意看到的朋友在评论区给出自己的理解 ---------------------------在父组件中使用------------------------------ 例: 在父组件中的.wxml文件中: <b-detail-swiper bind:handleClick="handleClick" /> 在父组件中的.js文件中 在Page对象中 handleClick(event){ //获取event对象 const index = event.detail.index; console.log(index) } 这样我们获取到子组件向父组件传递的数据
二、非父子组件之间的通信
wx小程序中的非父子组件通信其实特别简单, 在我们创建小程序的时候就会生成一个app.js、app.json等文件 我们的非父子组件之间的通信就需要用到app.js文件
例子: app.js文件: App({ onLaunch:function(){ }, addObj(obj){ this.globalData.proList.push(obj) } globalData:{ name:'', proList:[] } }) 注:home组件跟profile组件不是父子组件的关系
在home跟profile组件的js文件中我们先进行引用,这一步是必须的,先获取全局对象嘛 const app = getApp();
------------------------------发送数据----------------------------------
home.js文件: const app = getApp(); Page({ onLoad:function(options){ app.globalData.name = 'b-clouds' } }) 在home.js文件中,我们将app中的globalData中的name属性的值改为'b-clouds', 这时全局对象中的name属性的值就变成了'b-clouds'
---------------------------------获取数据----------------------------------
profile.js文件: const app = getApp(); Page({ onLoad:function(options){ }, //onClick只是一个单纯的点击事件 onClick(){ const name = app.globalData.name; console.log(name) //控制台打印出来的结果就是: b-clouds } })
上面的只是String类型数据的传递,那么其他类型呢? number跟String类型传递数据的方法是一样的
-------------------------------传递数据---------------------------------
而对象和数组传递数据的方式是一样的 例子: home.js: Page:{ data:{ id:1001, name:'b-clouds', age:22, height:1.81 } onClick(){ const obj = {} obj.id = this.data.id obj.name = this.data.name obj.age = this.data.age obj.height = this.data.height app.addObj(obj) } } 这样在home文件中就将全局对象中的proList的值改变;
---------------------------------获取数据-----------------------------------
profile.js文件: const app = getApp(); Page({ data:{ proList:[] } //监听页面显示 onShow:function(){ const proList = app.globalData.proList this.setData({ proList //es6增强语法: proList:proList === proList }) } }) profile.wxml文件: 这里就可以直接使用mastache语法使用proList {{proList}}
|
请发表评论