Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说关于vue3.x中的emits的用法,希望能够帮助你!!!。

这是官方的文字介绍。emits重要用于组件之间的通信，触发自定义事件，传递参数。
下面演示一个子组件把事件传递到父组件，组件间通信的例子。

<template>
  <teleport to="#modal">
    <div id="center" v-if="isOpen">
      <h2>
        <slot>this is a modal</slot>
      </h2>
      <button @click="clickButton">close</button>
    </div>
  </teleport>
</template>
<script lang="ts"> import { 
      defineComponent } from 'vue'; export default defineComponent({ 
      props: { 
      isOpen: Boolean, }, emits: { 
      'close-modal': null, }, setup(props, context) { 
      const clickButton = () => { 
      context.emit('close-modal'); }; return { 
      clickButton, }; }, }); </script>

<style scoped> #center { 
      width: 200px; height: 200px; border: 2px solid black; background: white; position: fixed; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; } </style>

isOpen用来表示Modal的显示与隐藏，点击按钮，触发clickButton函数，父组件调用，触发自定义事件close-modal，而close-modal在父组件中绑定了onModalClose函数,实现了对Modal的隐藏。

<template>
  <div id="main">
    <modal :isOpen="modalIsOpen" @close-modal="onModalClose">my modal</modal>
    <button @click="onModalOpen">Open Modal</button>
  </div>
</template>

<script lang="ts"> import { 
      defineComponent, ref } from 'vue'; import Modal from './components/Modal.vue'; export default defineComponent({ 
      components: { 
      Modal }, name: 'App', setup(){ 
      const modalIsOpen = ref(false) const onModalOpen = ()=>{ 
      modalIsOpen.value = true } const onModalClose = ()=>{ 
      modalIsOpen.value = false } return{ 
      onModalOpen, onModalClose, modalIsOpen } } }); </script>

<style> #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } button { 
      font-size: 2rem; } </style>

emits的文档

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。