首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 defineEmits使用

vue3中defineEmits的使用举例详解

2023-08-14 10:40:02 作者：coderXiao~

这篇文章主要给大家介绍了关于vue3中defineEmits使用的相关资料,在Vue3中可以使用defineEmits函数来定义组件的自定义事件,文中通过代码介绍的非常详细,需要的朋友可以参考下

vue3 defineEmits的使用

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

1、计数器案例

父组件：

<template>
     <h2>当前计数为： {{counter}}</h2>
     <HelloWorld @add1="add1" @decre1="decre1"></HelloWorld>
</template>
<script setup>
  import { ref } from 'vue'
  import HelloWorld from './HelloWorld.vue'
  // 1、定义的属性
  const counter = ref(0)
  // 2、定义的方法
   const add1 = (payload) => {
     counter.value = payload
  }
  const decre1 = (payload) => {
     counter.value = payload
  }
</script>

子组件：

<template>
    <div>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
        <div>
             <input type="text" v-model.number="num">
        </div>
    </div>
</template>
<script setup>
    import { ref, defineEmits } from 'vue'
    // 1、定义的属性
    const num = ref(0)
    // 2、定义发射给父组件的方法
    const emits = defineEmits(['add1', 'decre1'])
    // 3、定义新增和递减计数方法
    const increment = () => {
        num.value++
        emits('add1', num.value)
    }
    const decrement = () => {
        num.value--
        emits('decre1', num.value)
    }
</script>

页面渲染效果

2、案例说明

1、在父组件中定义一个变量2、在子组件中定义+1和-1方法，以及一个变量3、通过子组件事件修改变量值，同时将值传递给父组件，对父组件的变量进行赋值

3、defineEmits API 使用说明

1、在子组件中调用defineEmits并定义要发射给父组件的方法

const emits = defineEmits(['add1', 'decre1'])

2、使用defineEmits会返回一个方法，使用一个变量emits(变量名随意)去接收

3、在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数

 emits('add1', num.value)

补充知识：Vue 2中

在Vue 2中，我们可以使用$emit方法来触发自定义事件，并在父组件中通过v-on或@来监听这些事件。以下是使用Vue 2创建自定义事件的示例：

首先，在子组件中使用$emit触发自定义事件：

Vue.component('my-component', {
  methods: {
    handleClick() {
      this.$emit('my-event', 'event payload');
    }
  }
});

然后，在父组件中使用v-on或@来监听自定义事件：

<my-component v-on:my-event="handleEvent"></my-component>
<!-- 或者使用 @ -->
<my-component @my-event="handleEvent"></my-component>

最后，在父组件的方法中处理自定义事件：

methods: {
  handleEvent(payload) {
    // 处理事件逻辑
    console.log('Received event:', payload);
  }
}

在这个示例中，子组件通过$emit方法触发了一个名为my-event的自定义事件，并传递了一个payload作为参数。父组件通过v-on或@监听这个自定义事件，并在对应的方法中处理事件逻辑。

需要注意的是，在Vue 2中，自定义事件的传递是单向的，只能从子组件向父组件传递数据。如果需要在父组件中向子组件传递数据，可以使用props来实现。

使用场景：

父子组件通信：自定义事件是Vue 2中实现父子组件通信的一种方式。父组件可以监听子组件触发的自定义事件，从而获取子组件传递的数据或执行相应的逻辑。
组件解耦：通过使用自定义事件，可以将组件解耦，使得组件之间的通信更加灵活和可维护。组件可以通过触发自定义事件来通知其他组件发生了某些特定的动作或状态变化。

优点：

灵活性：自定义事件提供了一种灵活的方式来实现组件之间的通信，可以根据具体的需求定义和触发不同的事件。
组件解耦：通过使用自定义事件，可以将组件解耦，使得组件之间的通信更加灵活和可维护。

缺点：

单向传递：Vue 2中的自定义事件是单向传递的，只能从子组件向父组件传递数据。如果需要在父组件向子组件传递数据，需要使用props来实现。
需要手动管理事件：在使用自定义事件时，需要手动定义和管理事件的名称和参数，相对于其他通信方式，需要更多的配置和代码。

总体来说，Vue 2中的自定义事件适用于父子组件之间的通信和组件解耦的场景。它提供了一种灵活的方式来实现组件之间的通信，但需要手动管理事件，并且只能实现单向传递。在一些复杂的场景中，可能需要考虑使用Vuex或其他状态管理库来管理组件之间的共享状态。

总结

到此这篇关于vue3中defineEmits使用的文章就介绍到这了,更多相关vue3 defineEmits使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！