Vue组件事件之emit

1. 组件事件定义
父组件

<template>
  <div>count值为:{{count}}</div>
  <div>
    <!--定义一个自定义事件名称为addcount
    v-on绑定的事件为functionaddcount-->
    <classtest  :title="title" @自定义事件名称="需要绑定到自定义事件的方法" @自定义事件名称1="需要绑定到自定义事件的方法2"...... />
  </div>
</template>
<script setup>
import { ref } from "vue";
import classtest from "./components/classtest.vue";
let count = ref(1);
let title=ref('点击count++')

function 方法名称需绑定到自定义事件(参数1,参数2,....){
  本组件的响应式变量操作
}
</script>
<style scoped>
</style>

子组件(使用 <script setup>)

<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <!--使用$emit直接调用父组件的addcount方法-->
    <button @click="$emit(父组件自定义事件名称)">Enlarge text</button>
    <!--调用本组件定义的clickaddcount方法,在方法中定义输出组件名称-->
    <button @click="此组件自定义方法">Enlarge text</button>
  </div>
</template>

<script setup>
defineProps(['title'])
//返回一个等同于 $emit 方法的 emit 函数
let emit = defineEmits([父组件的自定义事件名称1,父组件的自定义事件名称2,....])

//此方法执行父组件俩个方法,
//如想执行一个单独写一个emit就可以
function 方法名称(){
  emit(父组件的自定义事件名称,参数1,参数2,....)
  emit(父组件的自定义事件名称,参数1,参数2,....)
  ....
}
</script>

<style>
</style>

子组件(未使用 <script setup>)

<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <!--使用$emit直接调用父组件的addcount方法-->
    <button @click="$emit(父组件的自定义事件名称)">Enlarge text</button>
    <!--调用本组件定义的clickaddcount方法,在方法中定义输出组件名称-->
    <button @click="此组件定义的方法">Enlarge text</button>
  </div>
</template>

<script>
export default {
  props:['title'],
  //使用emits接收父组件的自定义事件
  emits:[父组件自定义事件名称1,父组件自定义事件名称2,.....],

  //将接收到的自定义事件\自定义属性传入setup
  //第一个参数为props(自定义属性)
  //第二个参数为cxt(自定义事件)
  setup(自定义属性,自定义事件) {
    function 被此组件调用的方法名称(){
      ctx.emit(父组件自定义事件名称1,参数1,参数2,....)
      ctx.emit(父组件自定义事件名称2,参数1,参数2,....)
      ......
    }
    return{
      被此组件调用的方法名称
    }
  }
}
</script>

<style>
</style>

2. 组件事件实例
父组件

<template>
  <div>count值为:{{count}}</div>
  <div>
    <!--定义一个自定义事件名称为addcount
    v-on绑定的事件为functionaddcount-->
    <classtest  :title="title" @addcount="functionaddcount" @addcount1="functionaddcount" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import classtest from "./components/classtest.vue";
let count = ref(1);
let title=ref('点击count++')

//定义一个方法count++,传入自定义事件@addcount中
//因为要被子控件调用
function functionaddcount(e,a){
  console.log('我被子控件classtest的click事件执行了')
  console.log(e)
  count.value += e += a
}
</script>
<style scoped>
</style>

子组件(使用 <script setup>)

<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <!--使用$emit直接调用父组件的addcount方法-->
    <button @click="$emit('addcount')">Enlarge text</button>
    <!--调用本组件定义的clickaddcount方法,在方法中定义输出组件名称-->
    <button @click="clickaddcount">Enlarge text</button>
  </div>
</template>

<script setup>
defineProps(['title'])
//返回一个等同于 $emit 方法的 emit 函数
let emit = defineEmits(['addcount','addcount1'])

//此方法执行父组件俩个方法,
//如想执行一个单独写一个emit就可以
function clickaddcount(){
  emit('addcount',5,1)
  emit('addcount1',5,1)
}
</script>

<style>
</style>

子组件(未使用 <script setup>)

<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <!--使用$emit直接调用父组件的addcount方法-->
    <button @click="$emit('addcount')">Enlarge text</button>
    <!--调用本组件定义的clickaddcount方法,在方法中定义输出组件名称-->
    <button @click="clickaddcount">Enlarge text</button>
  </div>
</template>

<script>
export default {
  props:['title'],
  //使用emits接收父组件的自定义事件
  emits:['addcount','addcount1'],

  //将接收到的自定义事件\自定义属性传入setup
  //第一个参数为props(自定义属性)
  //第二个参数为cxt(自定义事件)
  setup(props,ctx) {
    function clickaddcount(){
      //需要执行的父组件中的自定义事件的值(即父组件中定义的方法)
      ctx.emit('addcount',5,1)
      ctx.emit('addcount1',5,1)
    }
    return{
      clickaddcount
    }
  }
}
</script>

<style>
</style>

3. 事件验证(没搞懂)

<script setup>
const emit = defineEmits({
  // 没有校验
  click: null,

  // 校验 submit 事件
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>