这篇“vue3.x中emits怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue3.x中emits怎么使用”文章吧。
这是官方的文字介绍。emits重要用于组件之间的通信，触发自定义事件，传递参数。
下面演示一个子组件把事件传递到父组件，组件间通信的例子。
<template>
<teleport to="#modal">
<div id="center" v-if="isOpen">
<h3>
<slot>this is a modal</slot>
</h3>
<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,
},
setupprops, 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 = reffalse)
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的文档
附：vue3自定义组件中的emits使用介绍
<template>
<!-- teleport的使用 to属性渲染到id为 teleport-test 的元素身上 在index.html中-->
<div id="center" v-if="isOpen">
<slot>插槽</slot>
<button @click="buttonClick">关闭模态框</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent{
props:{
isOpen: {
type: Boolean,
required: true
},
},
// emits 写自定义事件 作用 比较清晰知道该组件有那些自定义事件
emits: {
// 无需验证写法
'close-model': null,
// 这种写法 自定义函数 可以在运行时验证参数是否正确
'close-modals': payload: any) => {
return payload.type === 'close'
}
},
setupprops,context) {
const buttonClick = ) => {
context.emit'close-model')
}
// 这种写法来校验
context.emit'close-modals',{
// 如果验证失败会有一个警告
type: 'close'
// type: 'sss'
})
return {
buttonClick
}
}
})
</script>
<style>
#center{
width: 600px;
height: 300px;
border: 1px solid #999;
background-color: #fff;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -150px;
}
</style>