VUE3组件 (2) 关于defineEmits()

原创已于 2022-06-24 08:16:56 修改 · 3.2w 阅读

68 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-06-18 15:21:12 首次发布

vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在Vue3中如何使用defineProps和defineEmits进行父子组件间的通信。通过示例展示了如何在父组件传递数据到子组件，并通过子组件触发事件更新父组件的状态。同时，解释了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.说明

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

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

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

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

3.用法：

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

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

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

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