vue自定义事件

一般都是在组价中绑定自定义事件，在原生DOM上绑定自定义事件无意义

<div @eventName="method"></div>

组件标签中的原生事件

<routerName @click.native="method"><routerName>

如果在组件、路由标签中使用原生事件，会失效（被解析成了自定义事件），需要在后面加上.native来使原生事件生效

原理：其实是通过native标识，给子组件的根元素绑定上了事件

组件标签中的自定义事件

父组件：

<template>
	<routerName @click="method"></routerName>
</template>
<script>
    methods:{
      method(value){
          alert(value)
}  
}
</script>

子组件：

需要通过$emit触发

<template>
	<button @click="$emit{`click`,'回调参数'}"></button>
</template>
<script>
</script>

定义自定义事件

可以通过 emits 选项在组件上定义发出的事件。建议定义所有发出的事件，以便更好地记录组件应该如何工作。

可对发出的事件进行验证，用来声明该组件能够触发哪些事件。

app.component('custom-form', {// 子组件
  emits: {
    // 没有验证
    click: null,

    // 验证 submit 事件，如果验证通过，发送事件；否则停止发送
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
})

<script setup> 中的 defineEmits：

<script setup>
const emit1 = defineEmits(['inFocus', 'submit'])
const emit2 = defineEmits({
  submit(payload) {
    // 通过返回值为 `true` 还是为 `false` 来判断
    // 验证是否通过
  }
})
</script>

如果你正在搭配 TypeScript 使用 <script setup>，也可以使用纯类型标注来声明触发的事件：

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>