<template>
  <div>
    <h1>事件</h1>
    <!-- vue3:原生的DOM事件不管是放在標簽身上、組件標簽身上都是原生DOM事件-->
    <!-- 綁定自定義事件xxx:實現子組件給父組件傳遞數據 -->
    <Event2 @xxx="handler3" @click="handler4"></Event2>
  </div>
</template>

<script setup lang="ts">
//引入子組件
import Event2 from './Event2.vue';
const handler3 = (param1: any,param2: any)=>{
    console.log(param1,param2);
}
//事件回調--5
const handler4 = (param1: any,param2: any)=>{
     console.log(param1,param2);
}
</script>

<style scoped>
</style>

<template>
  <div class="child">
    <p>我是子組件2</p>
    <button @click="handler">點擊我觸發(fā)自定義事件xxx</button>
    <button @click="$emit('click','AK47','J20')">點擊我觸發(fā)自定義事件click</button>
  </div>
</template>

<script setup lang="ts">
//利用defineEmits方法返回函數觸發(fā)自定義事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx','click']);
//按鈕點擊回調
const handler = () => {
  //第一個參數:事件類型 第二個|三個|N參數即為注入數據
    $emit('xxx','東風導彈','航母');
};
</script>

<style scoped>
.child {
  width: 400px;
  height: 200px;
  background: pink;
}
</style>