Vue.js组件开发-如何使用Emit

Vue.js组件开发中，emit 是一个重要的机制，它允许子组件向父组件发送事件。父组件可以监听这些事件，并在事件被触发时执行相应的操作。

步骤：

1. 在子组件中触发事件

在子组件的方法中，可以使用 this.$emit 来触发一个事件。$emit 方法接受至少一个参数，即事件的名称。还可以传递额外的参数，这些参数将作为事件的数据被父组件接收。

// 子组件 (ChildComponent.vue)
<template>
  <button @click="sendMessage">发送消息给父组件</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 触发名为 'message' 的事件，并传递数据 'Hello from child'
      this.$emit('message', 'Hello from child');
    }
  }
}
</script>

2. 在父组件中监听事件

在父组件的模板中，可以使用 v-on 指令（或它的缩写 @）来监听子组件触发的事件。当事件被触发时，可以绑定一个方法来处理它。

// 父组件 (ParentComponent.vue)
<template>
  <ChildComponent @message="handleMessage"></ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(msg) {
      // 处理从子组件接收到的消息
      console.log(msg); // 输出: 'Hello from child'
    }
  }
}
</script>

3. 传递多个参数

如果需要传递多个参数给父组件，可以在触发事件时依次传递它们，然后在父组件的方法中接收这些参数。

// 子组件
this.$emit('multiple-data', param1, param2, param3);

// 父组件
<ChildComponent @multiple-data="handleMultipleData"></ChildComponent>

methods: {
  handleMultipleData(param1, param2, param3) {
    // 处理多个参数...
  }
}

4. 使用 v-model 进行双向绑定（Vue 2.x）

对于需要双向绑定的场景，如输入框的值，可以使用 v-model 指令结合 emit 来实现。子组件需要触发一个特定格式的事件（update:myProp），其中 myProp 是想要绑定的 props 名称。

// 子组件
<input :value="value" @input="$emit('update:value', $event.target.value)">

// 父组件
<ChildComponent v-model="childValue"></ChildComponent>

在Vue 3中，这种方式有所变化，通常使用 v-model 的 update: 前缀自动处理，但核心思想相似。

5. Vue 3 中的 defineEmits（组合式API）

在Vue 3中，如果使用组合式API（setup 函数），可以使用 defineEmits 来定义触发的事件。

// 子组件
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['message']);

function sendMessage() {
  emit('message', 'Hello from child using setup!');
}
</script>

使用 emit 机制，可以实现组件之间的解耦通信，使得组件更加独立和可重用。