uniapp组件通讯

1、父组件跳转页面时通过eventChannel设置监听事件：

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: '/pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

2、子组件接收父组件路径参数和eventChannel函数并且调用父组件事件传递数据：

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

3、调用父组件函数需要把当前页面函数映射到监听事件中：

// 当前页面的Vue实例
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    // 接收从被打开页面发送的数据
    acceptDataFromOpenedPage(data) {
      console.log('Received data:', data);
      this.message = data; // 假设我们想要更新当前页面的数据
    }
  },
  // 导航到新页面，并设置事件监听器
  navigateToPage() {
    uni.navigateTo({
      url: '/pages/test?id=1',
      events: {
        // 使用当前页面的实例方法作为监听器
        acceptDataFromOpenedPage: this.acceptDataFromOpenedPage
      },
      success: function(res) {
        console.log('navigateTo success', res);
      },
      fail: function(err) {
        console.error('navigateTo fail', err);
      }
    });
  }
};