vue $emit和$on如何使用
时间: 2023-10-30 11:58:57 浏览: 45
在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属性,从而更新组件中的显示内容。
vue3 使用$on $emit
根据提供的引用内容,Vue3中使用$on和$emit进行组件之间的通信方式与Vue2相同。具体使用方法如下:
1.在父组件中使用$emit触发事件,传递数据:
```javascript
// Parent.vue
<template>
<div>
<button @click="sendData">发送数据</button>
<Child @child-event="handleChildEvent"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
methods: {
sendData() {
this.$emit('parent-event', '这是来自父组件的数据');
},
handleChildEvent(data) {
console.log(data);
}
}
}
</script>
```
2.在子组件中使用$on监听事件,接收数据:
```javascript
// Child.vue
<template>
<div>
<button @click="sendData">发送数据</button>
</div>
</template>
<script>
export default {
methods: {
sendData() {
this.$emit('child-event', '这是来自子组件的数据');
}
},
mounted() {
this.$parent.$on('parent-event', (data) => {
console.log(data);
});
},
beforeUnmount() {
this.$parent.$off('parent-event');
}
}
</script>
```
在子组件中,我们使用$parent来访问父组件实例,然后使用$on来监听父组件触发的事件,并在beforeUnmount钩子函数中使用$off来移除事件监听器。