实现vue中的emit

Vue 中的 emit 实现方法

在 Vue 中，emit 用于子组件向父组件传递数据或触发父组件的方法。以下是实现 emit 的几种常见方法：

基本用法

子组件通过 this.$emit 触发自定义事件，父组件通过 v-on 监听该事件。

子组件代码：

<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', '传递的数据');
    }
  }
}
</script>

父组件代码：

<template>
  <child-component @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('接收到数据:', data);
    }
  }
}
</script>

使用 emits 选项声明事件

Vue 3 推荐在组件中显式声明 emits 选项，以提高代码可读性和维护性。

子组件代码：

<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script>
export default {
  emits: ['custom-event'],
  methods: {
    handleClick() {
      this.$emit('custom-event', '传递的数据');
    }
  }
}
</script>

带验证的事件

可以在 emits 选项中对事件参数进行验证。

子组件代码：

<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script>
export default {
  emits: {
    'custom-event': (payload) => {
      return typeof payload === 'string';
    }
  },
  methods: {
    handleClick() {
      this.$emit('custom-event', '传递的数据');
    }
  }
}
</script>

使用 setup 语法糖（Vue 3）

在 Vue 3 的 setup 语法糖中，可以通过 defineEmits 声明事件。

子组件代码：

<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script setup>
const emit = defineEmits(['custom-event']);

const handleClick = () => {
  emit('custom-event', '传递的数据');
};
</script>

注意事项

• 事件名建议使用 kebab-case（短横线分隔），例如 custom-event。
• 在 Vue 3 中，未在 emits 选项中声明的事件会作为原生事件绑定到组件的根元素上。
• 通过 emit 传递的数据可以是任意类型，但建议保持简单。