前言
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 钩子中，使用子组件引用的 off 方法取消对 child-event 事件的监听。当子组件中的按钮被点击时，会触发 child-event 事件，父组件会接收到数据并在控制台中打印出来。
总结
做一个积极向上的人，给自己和他人带来阳光。
