emit作用

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 触发事件并传递数据。
• 父组件通过 @ 监听事件，并执行相应的逻辑。