广东网站设计品牌设计_莱芜杂谈 莱芜话题_站内营销推广方案_企业培训心得体会

emit 是 Vue 3 中用于子组件向父组件传递事件和数据的机制。它允许子组件触发一个自定义事件，父组件可以监听这个事件并执行相应的逻辑。

---

emit 的作用

1. 子组件向父组件通信：
   • 子组件通过 emit 触发一个自定义事件，父组件监听这个事件并执行相应的逻辑。
2. 传递数据：
   • 子组件可以通过 emit 向父组件传递数据，父组件可以在事件处理函数中接收这些数据。
3. 解耦组件逻辑：
   • 子组件不需要知道父组件的具体实现，只需要触发事件，父组件负责处理逻辑。

---

示例

以下是一个简单的例子，展示如何使用 emit：

1. 子组件（ChildComponent.vue）

<template><div><button @click="handleClick">点击我</button></div>
</template><script setup>
// 定义 emit
const emit = defineEmits(['custom-event']);// 点击按钮时触发自定义事件
const handleClick = () => {// 触发 custom-event 事件，并传递数据emit('custom-event', { message: 'Hello from ChildComponent!' });
};
</script>

2. 父组件（ParentComponent.vue）

<template><div><ChildComponent @custom-event="handleCustomEvent" /><p>{{ message }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const message = ref('');// 监听子组件触发的 custom-event 事件
const handleCustomEvent = (data) => {message.value = data.message;
};
</script>

3. 运行效果

• 当用户点击子组件的按钮时，子组件会触发 custom-event 事件，并传递一个对象 { message: 'Hello from ChildComponent!' }。
• 父组件监听 custom-event 事件，接收到数据后更新 message，并在页面上显示。

---

父组件监听事件

在父组件中，可以通过 @ 监听子组件触发的事件：

<template><DeviceGroup@select="handleSelect"@menu-action="handleMenuAction"@sort-change="handleSortChange"@node-expand="handleNodeExpand"/>
</template><script setup>
const handleSelect = (data) => {console.log('Selected:', data);
};const handleMenuAction = (action) => {console.log('Menu Action:', action);
};const handleSortChange = (data) => {console.log('Sort Change:', data);
};const handleNodeExpand = (data) => {console.log('Node Expand:', data);
};
</script>

---

总结

• emit 用于子组件向父组件传递事件和数据。
• 通过 defineEmits 定义事件，emit 触发事件并传递数据。
• 父组件通过 @ 监听事件，并执行相应的逻辑。