组件通信之自定义事件

组件通信之自定义事件–defineEmits的使用

先上代码ba
有三个vue文件,一个父组件两个子组件
父组件Father.vue

<script setup lang="ts">
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
const handler = (event) => {
  console.log("父组件handler函数被调用", event);
};
const handler1 = (a: String, b: String, c: String) => {
  console.log("handler1函数被调用", a, b, c);
};
const handler11 = (a: String, b: String, c: String) => {
  console.log("父组件handler11函数被调用", a, b, c);
};
const handler2 = () => {
  console.log("父组件handler2函数被调用");
};
</script>
<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 原生DOM事件 -->
    <pre @click="handler">
      大江东去浪淘尽,千古风流人物
    </pre>
     <!--<pre> 标签可定义预格式化的文本, <pre> 标签元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体 -->
     
    <!-- 绑定自定义事件child1:实现子组件给父组件传递数据 -->
    <Child1 @child1="handler1" @click="handler11"></Child1>
    
    <!--
        vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
        vue3框架下面写法其实即为原生DOM事件

        vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
      -->
    <Child2 @click="handler2"></Child2>
     
    
  </div>
</template>
<style scoped></style>

子组件1Child1.vue

<script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
const emit = defineEmits(["child1", "click"]);//这里写了click,则代表click为自定义事件,如果不加click,则为原生事件,点击组件内任一处即触发(参考Child2.vue)

//按钮点击回调
const handler = (a: String, b: String, c: String) => {
//第一个参数:事件类型 第二个|三个|N参数即为注入数据
  //   emit("child1", "html", "css", "js");
  emit("child1", a, b, c);
};
</script>

<template>
  <div class="container">
    <h1>我是Child1组件</h1>
    <button @click="handler('html', 'css', 'js')">点击执行handler1</button>
    <button @click="emit('click', 'vue', 'resct', 'angular')">
      点击执行handler11
    </button>
  </div>
</template>
<style scoped>
.container {
  width: 600px;
  height: 300px;
  background: pink;
}
</style>

子组件2Child2.vue

<script setup></script>

<template>
  <div class="container">
    <h1>我是Child2组件</h1>
    <button>点击试试</button>
  </div>
</template>
<style scoped>
.container {
  width: 600px;
  height: 300px;
  background: yellowgreen;
}
</style>

总结:

1.子组件中利用defineEmits方法返回函数触发自定义事件
2.原生DOM事件(如click),如在defineEmits定义了,会变为自定义事件