vue3.x中emits怎么使用(emits,vue,开发技术)

这是官方的文字介绍。emits重要用于组件之间的通信，触发自定义事件，传递参数。

下面演示一个子组件把事件传递到父组件，组件间通信的例子。

<template><teleportto="#modal"><divid="center"v-if="isOpen"><h3><slot>thisisamodal</slot></h3><button@click="clickButton">close</button></div></teleport></template><scriptlang="ts">import{defineComponent}from'vue';exportdefaultdefineComponent({props:{isOpen:Boolean,},emits:{'close-modal':null,},setup(props,context){constclickButton=()=>{context.emit('close-modal');};return{clickButton,};},});</script><stylescoped>#center{width:200px;height:200px;border:2pxsolidblack;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><divid="main"><modal:isOpen="modalIsOpen"@close-modal="onModalClose">mymodal</modal><button@click="onModalOpen">OpenModal</button></div></template><scriptlang="ts">import{defineComponent,ref}from'vue';importModalfrom'./components/Modal.vue';exportdefaultdefineComponent({components:{Modal},name:'App',setup(){constmodalIsOpen=ref(false)constonModalOpen=()=>{modalIsOpen.value=true}constonModalClose=()=>{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的文档

附：vue3自定义组件中的emits使用介绍

<template><!--teleport的使用to属性渲染到id为teleport-test的元素身上在index.html中--><divid="center"v-if="isOpen"><slot>插槽</slot><button@click="buttonClick">关闭模态框</button></div></template><scriptlang="ts">import{defineComponent}from"vue";exportdefaultdefineComponent({props:{isOpen:{type:Boolean,required:true},},//emits写自定义事件作用比较清晰知道该组件有那些自定义事件emits:{//无需验证写法'close-model':null,//这种写法自定义函数可以在运行时验证参数是否正确'close-modals':(payload:any)=>{returnpayload.type==='close'}},setup(props,context){constbuttonClick=()=>{context.emit('close-model')}//这种写法来校验context.emit('close-modals',{//如果验证失败会有一个警告type:'close'//type:'sss'})return{buttonClick}}})</script><style>#center{width:600px;height:300px;border:1pxsolid#999;background-color:#fff;position:fixed;left:50%;top:50%;margin-left:-300px;margin-top:-150px;}</style>