小程序组件之间的通信
前言：
其实之前就想写这个的，因为我觉得这么模块化的框架，组件之间通信是非常重要的，也是最经常用到的一块儿，
只是之前在项目里一直没用到跨组件通信，现在用到了，也会用了，就一起写出来得了 :）
一、父、子组件之间的通信
注：首先我们先将子组件在父组件中注册，并且在父组件上使用！！！
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}}
