当前位置：首页 > news >正文

Vue3实战笔记（47）— 一探emit奥秘——组件间通信的艺术与实践

news 来源：原创 2024/9/21 2:46:28

文章目录

前言
一、Vue 2 中的emti
二、Vue 3的emit
总结

前言

Vue封装了自定义组件之后，如果子组件想要向父组件传递数据该怎么办？

Vue.js 中的 emit 方法就是主要用于组件间的通信，特别是父组件与子组件之间的通信机制。它是 Vue 组件内部触发自定义事件并向父级组件传递数据的一种方式。

一、Vue 2 中的emti

在 Vue 组件中，当你想要向父组件传递信息或通知父组件某个状态发生了改变时，可以使用 $emit。通常情况下，子组件无法直接修改父组件的数据，而是通过定义并触发一个自定义事件，由父组件监听并在回调函数中作出响应。

但是要注意，Vue2和Vue3的用法略有不同。
Vue 2 示例：

<!-- 父组件（parent-component.vue） -->
<template><div><child-component @child-event="handleChildEvent" /></div>
</template><script>
import ChildComponent from './child-component.vue';export default {components: { ChildComponent },methods: {handleChildEvent(data) {console.log('接收到的数据:', data);}}
}
</script>
<!-- 子组件（child-component.vue） -->
<template><div><button @click="sendData">发送数据</button></div>
</template><script>
export default {methods: {sendData() {this.$emit('child-event', '这是发送的数据');}}
}
</script>

在这个例子中，子组件 child-component.vue 使用 $emit 方法触发了一个名为 child-event 的自定义事件，并传入了一个参数 data。父组件 parent-component.vue 通过监听 child-event 事件并定义一个处理函数 handleChildEvent 来接收数据。当子组件中的按钮被点击时，会触发 child-event 事件，父组件会接收到数据并在控制台中打印出来。

二、Vue 3的emit

Vue 3 示例：


<!-- 父组件（parent-component.vue） -->
<template><div><child-component ref="childRef" /></div>
</template><script>
import ChildComponent from './child-component.vue';export default {components: { ChildComponent },setup() {const childRef = ref(null);function handleChildEvent(data) {console.log('接收到的数据:', data);}onMounted(() => {childRef.value.$on('child-event', handleChildEvent);});onUnmounted(() => {childRef.value.$off('child-event', handleChildEvent);});return { childRef };}
}
</script><!-- 子组件（child-component.vue） -->
<template><div><button @click="sendData">发送数据</button></div>
</template><script>
export default {methods: {sendData() {this.$emit('child-event', '这是发送的数据');}}
}
</script>

在这个例子中，父组件 parent-component.vue 使用 ref 属性创建了一个引用，并将其分配给子组件。在 setup 函数中，定义了一个处理函数 handleChildEvent 用于处理自定义事件。在 onMounted 钩子中，使用子组件引用的 $on 方法监听 child-event 事件。在 onUnmounted 钩子中，使用子组件引用的 $off 方法取消对 child-event 事件的监听。当子组件中的按钮被点击时，会触发 child-event 事件，父组件会接收到数据并在控制台中打印出来。