深入解析Vue 2源码——事件系统$on的奥秘

2023-10-30 08:55:23

揭秘Vue 2事件系统的运转机制

Vue 2的事件系统是其强大功能的基石之一，它使开发人员能够轻松地构建出交互式和响应式的应用程序。事件系统基于发布-订阅模式，组件可以订阅事件并对事件的触发做出响应。

事件绑定的奥秘

在Vue 2中，事件绑定是通过on方法实现的。on方法接受两个参数：事件名称和回调函数。当事件触发时，回调函数将被调用，并传递事件对象作为参数。

<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('按钮被点击了', event);
    }
  }
};
</script>

在上面的示例中，当按钮被点击时，handleClick方法将被调用，并打印出事件对象。事件对象包含有关事件的详细信息，如事件类型、目标元素和时间戳。

事件触发与传播的秘密

当事件触发时，它将在组件内部传播。如果事件没有被组件内部的任何元素捕获，则它将传播到父组件。这个过程一直持续到事件被某个组件捕获或达到根组件为止。

<template>
  <div @click="handleParentClick">
    <button @click="handleClick">点我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('按钮被点击了', event);
    },
    handleParentClick(event) {
      console.log('父组件被点击了', event);
    }
  }
};
</script>

在上面的示例中，当按钮被点击时，handleClick方法将被调用，并打印出事件对象。随后，事件将传播到父组件，handleParentClick方法也将被调用，并打印出事件对象。

父子组件事件绑定的玄妙之处

在Vue 2中，父组件上的@事件实际上是绑定在子组件上的。这是因为Vue 2的组件是通过模板编译而成的，而模板中的事件绑定是直接作用于子组件的。

<template>
  <child-component @click="handleParentClick"></child-component>
</template>

<script>
export default {
  methods: {
    handleParentClick(event) {
      console.log('父组件被点击了', event);
    }
  }
};
</script>