[JavaScript知识库]VUE3组件 (2) 关于defineEmits()

前言

以下代码和内容的使用都是在setup中，未使用TS。

<script setup>
</script>

VUE3组件 (1) 关于defineProps()

VUE3组件 (3) 关于 slot 插槽

VUE3组件 (4) 关于 Provide Inject 依赖注入

使用defineEmits

在 单文件组件中。父子组件进行交互

1.例子

父级组：

<template>
  <section class="parent">
    <childVue :num="nums" @increase="handleIncrease"></childVue>
  </section>
</template>

<script setup>
  import childVue from './child.vue';
  import { ref } from 'vue';
  const nums = ref(0);
  const handleIncrease = () => {
    nums.value++;
  };
</script>

子组件：

<template>
  <section class="box" @click="handelClick">{{ num }}</section>
</template>

<script setup>
  const emits = defineEmits(['increase']);
  const handelClick = () => {
    emits('increase');
  };
</script>

页面表现为

2.说明

1. 在父组件中传递了一个 num在子组件中展示。
2. 父组件中

<childVue :num="nums" @increase="handleIncrease"></childVue>
// @increase 为监听事件 increase。handleIncrease为监听后执行的函数，这里是将 nums++

3. 子组件中添加一个点击事件，方便后续的触发

<section class="box" @click="handelClick">{{ num }}</section>
// 给元素添加了 点击事件。去触发父级的 increase 监听。

3.用法 ：

1. 与defineProps一样，无需引入，直接可以使用。使用 defineEmits 声明事件（也就是父级页面上添加的 @监听事件）

const emits = defineEmits(['increase']);
 	 emits 为 defineEmits 显示声明后的对象。
 	 如存在多个监听事件则为 defineEmits(['increase','emit2','emit3'])
  const handelClick = () => {
    emits('increase');
    如果需要触发其他监听时间则为 emits('emit2');
    emits 对象触发的事件都应该为 defineEmits 声明后的事件
    
 };

2. 传参
   在 emits() 的第一个参数，是监听事件的字面量。第二个参数为事件传递的参数。如果该事件有多个参数，第二个参数建议用对象的形式传递。
   示例

   //子组件发送
    emits('increase', {params1:'1',params2:'2'});
   //父组件监听
    const handleIncrease = (params) => {
   	console.log(' params1);//{params1:'1',params2:'2'}
   	nums.value += datas;
   };