vue3组件通信之自定义事件

在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。
原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave…
自定义事件可以实现子组件给父组件传递数据

原生DOM事件

代码如下:

//vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
//vue3框架下面写法其实即为原生DOM事件
//vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
 <pre @click="handler">
      最美的不是下雨天
 </pre>

当前代码级给pre标签绑定原生DOM事件点击事件,默认会给事件回调注入event事件对象。当然点击事件想注入多个参数可以按照下图操作。但是切记注入的事件对象务必叫做$event.

<template>
  <div>
    <!-- 原生DOM事件 -->
    <pre @click="handler">
      最美的不是下雨天
    </pre>
    <button @click="handler1(1,2,3,$event)">点击我传递多个参数</button>
  </div>
</template>

<script setup lang="ts">
//引入子组件
import Event1 from './Event1.vue';

const handler1 = (a,b,c,$event)=>{
   console.log(a,b,c,$event)
}
</script>

在vue3框架click、dbclick、change(这类原生DOM事件),不管是在标签、自定义标签上(组件标签)都是原生DOM事件。
vue2中却不是这样的,在vue2中组件标签需要通过native修饰符才能变为原生DOM事件

自定义事件

自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。
比如在父组件内部给子组件(Event2)绑定一个自定义事件

<Event2  @xxx="handler3"></Event2>

在Event2子组件内部触发这个自定义事件

<template>
  <div>
    <h1>我是子组件2</h1>
    <button @click="handler">点击我触发xxx自定义事件</button>
  </div>
</template>

<script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx']);
const handler = () => {
  $emit("xxx", "手机", "ikun");
};
</script>
<style scoped>
</style>

我们会发现在script标签内部,使用了defineEmits方法，此方法是vue3提供的方法,不需要引入直接使用。defineEmits方法执行，传递一个数组，数组元素即为将来组件需要触发的自定义事件类型，此方执行会返回一个 $ emit 方法用于触发自定义事件。

当点击按钮的时候，事件回调内部调用$emit方法去触发自定义事件,第一个参数为触发事件类型，第二个、三个、N个参数即为传递给父组件的数据。

需要注意的是:代码如下

<Event2  @xxx="handler3" @click="handler"></Event2>

正常说组件标签书写@click应该为原生DOM事件,但是如果子组件内部通过defineEmits定义就变为自定义事件了

let $emit = defineEmits(["xxx",'click']);
const handler = () => {
  //第一个参数:事件类型 第二个|三个|N参数即为注入数据
    $emit('xxx','飞机','杯子');
};