Vue3 子组件如何抛出事件($emit 在 setup()、<script setup> 中使用)

2,580 阅读1分钟
  • vue2$emit 抛出事件

    <template>
      <!-- 点击事件 -->
      <button @click="touchButton">点击抛出事件</button>
    </template>
    
    <script>
    export default {
      methods: {
        touchButton () {
          // 抛出 success 事件
          this.$emit('success', '自带参数(可选)')
        }
      }
    }
    </script>
    
  • Vue3 setup () {}$emit 抛出事件

    <template>
      <!-- 点击事件 -->
      <button @click="touchButton">点击抛出事件</button>
    </template>
    
    <script>
    export default {
      setup (props ,context) {
        // 点击按钮
        function touchButton () {
          context.emit('success', '自带参数(可选)')
        }
        // 返回
        return {
          touchButton
        }
      }
    }
    </script>
    
  • 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>
    
  • 还有一种便捷写法,上面几种写法中都支持使用

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