基于“发布 — 订阅”模式的跨页面通信

前端

2023-11-07 07:53:38

跨页面通信

跨页面通信是指在不同的web页面之间交换数据或信息。在基于“发布 — 订阅”模式下，跨页面通信可以实现更复杂的交互性，例如：

一个页面发布一个事件，另一个页面订阅该事件并做出相应反应。
一个页面发送数据到另一个页面，而另一个页面接收并处理这些数据。

实现跨页面通信

基于“发布 — 订阅”模式实现跨页面通信，需要遵循以下步骤：

建立一个发布者页面和一个订阅者页面。 发布者页面是发出事件的页面，而订阅者页面是接收事件的页面。
**在发布者页面中，使用Vue.js的emit()方法发布一个事件。** emit()方法接收两个参数，第一个参数是事件的名称，第二个参数是事件的数据。
**在订阅者页面中，使用Vue.js的on()方法订阅一个事件。** on()方法接收两个参数，第一个参数是事件的名称，第二个参数是一个回调函数，当事件被触发时，该回调函数将被执行。
在订阅者页面中，调用$emit()方法发布一个事件，将数据发送到发布者页面。
在发布者页面中，使用$on()方法订阅一个事件，接收来自订阅者页面的数据。

示例代码

以下示例代码演示了如何使用Vue.js实现跨页面通信：

发布者页面：

<template>
  <div>
    <button @click="publishEvent()">发布事件</button>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'Publisher',
  methods: {
    publishEvent() {
      this.$emit('my-event', {
        message: 'Hello world!'
      })
    }
  }
}
</script>

订阅者页面：

<template>
  <div>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'Subscriber',
  data() {
    return {
      message: null
    }
  },
  created() {
    this.$on('my-event', (data) => {
      this.message = data.message
    })
  }
}
</script>