小程序组件之间的通信 小程序子父子组件通信

注：首先我们先将子组件在父组件中注册，并且在父组件上使用！！！            
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}}