Vue3 子组件如何抛出事件（$emit 在 setup()、＜script setup＞ 中使用）_vue3 子组件抛出方法

在 vue2 中 $emit 抛出事件

<template>
  <!-- 点击事件 -->
  <button @click="touchButton">点击抛出事件</button>
</template>

<script>
export default {
  methods: {
    touchButton () {
      // 抛出 success 事件
      this.$emit('success', '自带参数（可选）')
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在 Vue3 setup () {} 中$emit 抛出事件

<template>
  <!-- 点击事件 -->
  <button @click="touchButton">点击抛出事件</button>
</template>

<script>
export default {
  setup (props ,context) {
    // 点击按钮
    function touchButton () {
      context.emit('success', '自带参数（可选）')
    }
    // 返回
    return {
      touchButton
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在 Vue3 <script setup> 中 $emit 抛出事件

<template>
  <!-- 点击事件 -->
  <button @click="touchButton">点击抛出事件</button>
</template>

<script setup>
import { defineEmits } from 'vue'
const emits = defineEmits(['success'])
// 点击按钮
function touchButton () {
  emits('success', '自带参数（可选）')
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

还有一种便捷写法，上面几种写法中都支持使用

<template>
  <!-- 点击事件 -->
  <button @click="$emit('success', '自带参数（可选）')">点击抛出事件</button>
</template>

<script>
export default {
}
</script>
1
2
3
4
5
6
7
8
9