页面通信

如果一个页面通过 wx.navigateTo 打开一个新页面，这两个页面间将建立一条数据通道
1、在 wx.navigateTo 的 success 回调中通过 EventChannel 对象发射事件
1、被打开的页面可以通过 this.getopenerEventChannel()方法来获得一个 Eventchannel对象，进行监听、发射事件
3、wx.navigateTo 方法中可以定义 events 配置项接收被打开页面发射的事件

页面

<button type="warn" plain bind:tap="handler">跳转到被打开页面</button>

Page({
handler(){
    wx.navigateTo({
        url:'/pages/list/list',
        events:{
            // key:  被打开页面通过 eventChannel发射事件
            // value: 回调事件
            // 为事件添加一个监听器，获取被打开也页面传递给当前页面的数据
            currentevent:(res)=>{
                console.log(res);
            }
        },
        success(res){
            res.eventChannel.emit('myevent',{name:'tom'})
        }
    })
}
})

被打开页面

<!--pages/list/list.wxml-->
<text>hah</text>

Page({
    onLoad(){
        const EventChannel = this.getOpenerEventChannel()
        // EventChannel提供的on方法进行监听、发射事件
        EventChannel.on('myevent',(res)=>{
            console.log(res);
        })

        // EventChannel提供的emit方法可以向上一个页面传递数据
        // 需要使用emit定义自定义事件，携带需要传递的数据
        EventChannel.emit('currentevent',{age:18})
    }
})

注意：list不能在toBar页面运行：可见

index给list传值name:"tom"

list给index传age：18

组件通信--事件总线

事件总线是对发布-订阅模式的一种实现，是一种集中式事件处理机制，允许不同的组件之间进行彼此通信，常用于两个非父子关系组件和兄弟组件之间通讯。我们可以借助第三方的发布订阅JS 包，来实现事件总线的功能，PubsubJS

创建组件

conponents中创建两个组件

配置：

 "usingComponents": {
      "custom01":"./components/custom01/custom01",
      "custom02":"./components/custom02/custom02"
  }

<view class="parent">
<view class="title">这是父组件，子组件 a、b 是兄弟关系</view>
<view class="container">
<custom01/>
<custom02/>
</view>
</view>

自行给组件添加样式

<view class="btother1">
<text>子组件a</text>
<button bind:tap="sendData">传递数据给b兄弟</button>
</view>

import PubSub from 'pubsub-js'
Component({
    data:{
        name:'tom'
    },
    methods:{
        sendData(){
             // publish 发布、发射自定义事件
             // 1、自定义事件的名称 ----custom01sent
             // 2、需要传递的数据 ----{name:this.data.name,age:18}
            PubSub.publish('custom01sent',{name:this.data.name,age:18})
        }
    }
})

自定义事件名称对应

<view class="btother2">
<text>子组件b</text>
<view>name:{{name}}</view>
<view>age:{{age}}</view>
</view>

import PubSub from 'pubsub-js'
Component({
    data:{
        name:'',
        age:''
    },
    lifetimes:{
        attached(){
           // subscribe 订阅、监听自定义的事件
           //1、需要订阅、监听的自定义事件名称---custom01sent
           //2、回调函数，回调函数有两个参数
           // （1）msg:自定义事件的名称
           // （2）data:传递过来的数据
            PubSub.subscribe("custom01sent",(msg,data)=>{
                this.setData({name:data.name,age:data.age})
            })
        }
    }
})

运行之前的index页面：

运行之后的index页面：

【小程序--页面通信、组件通信】（通俗易懂）

页面通信

页面

被打开页面

组件通信--事件总线

创建组件