$on是什么意思 vue

在Vue中，"$on"代表了事件监听器的使用。它是一个Vue实例方法，用于订阅事件。通过调用"$on"方法，可以注册一个自定义事件，当特定事件触发时，相应的回调函数就会被执行。

具体来说，$on方法通常在Vue组件的钩子函数(created、mounted等)或方法中使用。通过在组件中使用$on方法，我们可以监听指定的自定义事件，一旦该事件触发，就会执行指定的回调函数，从而实现组件之间的通信和交互。

示例代码如下：

// 在组件A中注册事件监听器
this.$on('customEvent', this.eventHandler);

// 定义事件处理函数
eventHandler() {
  // 执行一些操作...
}

// 在组件B中触发事件
this.$emit('customEvent');

在上面的例子中，组件A通过调用$on方法注册了一个名为"customEvent"的自定义事件，并指定了事件处理函数eventHandler。当组件B通过调用$emit方法触发了"customEvent"事件时，组件A中的eventHandler函数会被执行。

使用$on和$emit方法可以方便地实现组件之间的数据传递和通信，使得Vue应用具有更好的灵活性和扩展性。

在Vue中，$on是一个Vue实例的方法，用于监听自定义事件。通过调用$on方法，可以注册一个事件监听器，用于监听指定的事件。当该事件被触发时，注册的事件监听器将被执行。

$on的语法如下：

vm.$on(event, callback)

其中，event是要监听的事件名，可以是一个字符串或一个数组；callback是事件被触发时执行的回调函数。

通过使用$on方法，我们可以在Vue组件中监听自定义事件，并在事件触发时执行相应的操作。以下是$on方法的一些常见用法：

1. 监听自定义事件

// 注册事件监听器
this.$on('customEvent', function(){
  // 事件被触发时执行的操作
})

2. 监听多个事件

// 注册事件监听器，监听多个事件
this.$on(['event1', 'event2'], function(){
  // 事件被触发时执行的操作
})

3. 监听同一个事件多次

// 注册事件监听器，监听同一个事件多次
this.$on('customEvent', function(){
  console.log('事件被触发了！')
})
this.$on('customEvent', function(){
  console.log('事件也被触发了！')
})

4. 使用$once方法只监听事件一次

// 注册事件监听器，只监听事件一次
this.$once('customEvent', function(){
  // 事件被触发时执行的操作
})

5. 在组件销毁时，清除事件监听器

// 注册事件监听器
const listener = function(){
  // 事件被触发时执行的操作
}
this.$on('customEvent', listener)

// 组件销毁时调用
this.$off('customEvent', listener)

总结：$on方法是Vue中用于监听自定义事件的方法，通过调用$on方法可以注册事件监听器，监听指定事件的触发，并在触发时执行回调函数。

在Vue.js中，$on是一个实例方法，用于在Vue实例上注册自定义事件。它允许你在一个组件中触发一个事件，并在另一个组件中监听和处理这个事件。

$on方法接受两个参数：事件名称和回调函数。事件名称是一个字符串，用于标识特定的事件，回调函数是一个函数，用于处理事件触发后的逻辑。

下面是一些使用$on方法的常见场景：

1. 在父组件中监听子组件的事件

// 子组件
<template>
  <button @click="clickHandler">点击按钮</button>
</template>

<script>
export default {
  methods: {
    clickHandler() {
      this.$emit('customEvent', '自定义事件触发');
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @customEvent="handleEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleEvent(payload) {
      console.log(payload); // 输出：自定义事件触发
    }
  }
}
</script>

在子组件中，通过$this.$emit方法触发了一个名为"customEvent"的事件，并将自定义数据作为参数传递给了父组件。在父组件中监听了这个事件，当事件被触发时，执行了handleEvent方法。

2. 在任何组件中监听全局事件

Vue实例提供了一个全局事件总线来处理应用程序级别的事件通信。你可以使用$on方法在任何组件中监听全局事件，并且可以使用$emit方法在其他组件中触发这些事件。

// main.js
import Vue from 'vue';
Vue.prototype.$bus = new Vue(); // 在Vue原型上添加一个全局事件总线

// 组件A
<template>
  <button @click="emitEvent">触发全局事件</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$bus.$emit('globalEvent', '全局事件触发');
    }
  }
}
</script>

// 组件B
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.$bus.$on('globalEvent', (payload) => {
      this.message = payload;
    });
  }
}
</script>

在main.js中，我们在Vue原型上添加了一个名为$bus的Vue实例，它充当了一个全局事件总线。在组件A中，通过$this.$bus.$emit方法触发了一个名为"globalEvent"的全局事件，并将自定义数据作为参数传递给了组件B。在组件B中，通过$this.$bus.$on方法监听了这个全局事件，并在事件触发时更新了message的值。

通过$on方法，我们可以方便地实现组件之间的通信和交互，并且可以在任何组件中监听全局事件。