vue 实例更好的监听浏览器事件

2023-11-24 02:26:09

前言

在前端开发中，我们经常需要监听浏览器事件，比如点击事件、鼠标移动事件等。在 Vue 中，我们可以通过 v-on 指令来监听事件。但是，如果我们需要监听的事件比较多，那么代码就会变得很冗长和难以管理。

使用单独的 Vue 实例来监听事件

为了解决这个问题，我们可以使用一种更简单的方法，那就是使用单独的 Vue 实例来监听事件。这种方法可以使代码更加简洁和易于管理。

首先，我们需要创建一个新的 Vue 实例。这个实例可以是一个简单的对象，也可以是一个组件。

const eventBus = new Vue()

然后，我们可以使用 $on() 方法来监听事件。

eventBus.$on('click', () => {
  // 做一些事情
})

最后，我们可以使用 $emit() 方法来触发事件。

eventBus.$emit('click')

示例

为了更好地理解如何使用这种方法，我们来看一个简单的示例。

// 事件总线实例
const eventBus = new Vue()

// 组件 A
Vue.component('component-a', {
  template: '<button @click="handleClick">按钮</button>',
  methods: {
    handleClick() {
      // 触发 click 事件
      eventBus.$emit('click')
    }
  }
})

// 组件 B
Vue.component('component-b', {
  template: '<p>当按钮被点击时，这里会显示 "按钮被点击了"。</p>',
  mounted() {
    // 监听 click 事件
    eventBus.$on('click', () => {
      console.log('按钮被点击了')
    })
  }
})

// 创建 Vue 实例
const app = new Vue({
  el: '#app'
})