Vue3 - 组件事件

组件事件

触发与监听事件

• 触发

• 通过$emit方法触发自定义事件

<!-- 子组件 -->
<button @click="$emit('someEvent')">clickme</button>

• 监听

• 父组件通过v-on或者@去监听事件

<!-- 父组件 -->
<MyComponent @some-event="callback"/>
    
<!-- 使用.once修饰符 -->    
<MyComponent @some-event.once="callback"/>

• 也可以进行传参（经常用的）

// 子组件
// 此处click事件一般会定义一个函数书写
<button @click="$emit('increaseBy', 1)">
  Increaseby1
</button>

// 父组件
<MyButton @increase-by="increaseCount"/>
// increase-by触发的函数
function increaseCount(n) {
  count.value+=n
}  

声明触发的事件

• 在<script setup>中不能使用$emit方法，需要特定的语法书写，写法好像vuex哈哈

// 子组件
<template>
  <div class="blog-post">
    <button @click="buttonFn('按钮')">Enlarge text</button>
  </div>
</template>
 
<script setup>
// 使用defineEmits去统一定义
const emit = defineEmits(['enlarge-text'])
const buttonFn = (str) => {
  console.log(str)
  // 触发事件并且携带参数
  emit('enlarge-text', 50)
}
</script>

• 如果使用setup的话，事件需要通过emits选项定义，之后就可以进行触发

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}