vue $emit和$on如何使用

在Vue中，$emit和$on是用来实现组件之间传值的方法。$emit用于在子组件中触发一个自定义事件，并且可以传递参数，而$on用于在父组件中监听这个事件并执行相应的逻辑。注意，$emit和$on的事件必须在一个公共的实例上才能触发。具体的使用方法如下所示：

1. 在子组件中使用$emit触发事件：

   this.$emit('eventName', parameter);

其中，'eventName'是自定义的事件名，parameter是要传递的参数。

2. 在父组件中使用$on监听事件：

   <child-component v-on:eventName="handleEvent"></child-component>

其中，'eventName'是子组件中触发的事件名，handleEvent是父组件中的一个方法，用于处理事件的逻辑。

通过以上的使用方法，就可以实现子组件向父组件传值的功能了。需要注意的是，父组件中必须使用v-on指令来监听子组件触发的事件，并将事件名与相应的处理方法绑定起来。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

相关问题

vue $emit $on

在Vue中，$emit和$on是用于实现组件间通信的两个方法。

$emit方法用于在当前实例上触发自定义事件。它可以接收一个事件名称作为第一个参数，以及可选的附加参数。例如，通过调用`this.$emit('test', 'Hello')`来触发名为"test"的自定义事件，并传递字符串"Hello"作为参数。

$on方法用于监听当前实例上的自定义事件。它接收两个参数，第一个参数是事件名称，第二个参数是一个回调函数。当触发该事件时，回调函数会被执行，并接收所有传入事件触发函数的额外参数。例如，通过调用`this.$on('test', function(msg){ console.log(msg) })`来监听名为"test"的自定义事件，并在事件触发时打印出传递的参数。

在给定的代码示例中，`this.$EventBus`是一个在Vue原型上注册的全局事件总线对象。通过将事件总线对象分配给`Vue.prototype.$EventBus`，我们可以在不同的组件中访问和使用它。其中，`new Vue()`创建了一个Vue实例并将事件总线对象赋值给`$EventBus`。然后，我们可以在组件中使用`this.$EventBus.$emit()`触发自定义事件，以及使用`this.$EventBus.$on()`监听自定义事件。

在header组件中，通过在created生命周期钩子函数中使用`this.$EventBus.$on()`方法监听名为"changeNum"的自定义事件。当"changeNum"事件被触发时，回调函数会执行，并将传递的参数赋值给headStr属性，从而更新组件中的显示内容。

vue $emit 不出发

$emit不触发的原因是因为传入的事件名称只能使用小写，不能使用大写的驼峰规则命名。在Vue中，可以通过在父组件中使用`$on`监听自定义事件，然后在子组件中使用`$emit`触发该事件，从而实现组件之间的通信。

在给定的代码示例中，可以看到在父组件中使用`$on`方法监听了名为"my_events"的自定义事件，并将其与名为"handleEvents"的回调函数关联起来。而在子组件中，通过点击按钮触发`boost`方法，该方法使用`$emit`触发了"my_events"事件，并传递了参数"my params"。

如果`$emit`方法不触发，一种可能的原因是事件名称大小写不正确。请确保事件名称为小写，并且与`$on`方法中的事件名称保持一致。