emits
- 官方文檔傳送門
- Vue官方建議我們在組件中所有的emit事件都能在組件的
emits選項中聲明 - emits參數(shù)有倆種形式對象和數(shù)組蓖康，對象里面可以配置帶校驗emit事件飒焦，為null的時候代表不校驗停局，校驗的時候寞肖，會把emit事件的參數(shù)傳到校驗函數(shù)的參數(shù)里面
- 當(dāng)校驗函數(shù)不通過的時候矢洲，控制臺會輸出一個警告率拒，但是emit事件會繼續(xù)執(zhí)行
- 記錄一個坑：比如你emit事件的名稱正好和原生事件的名字重復(fù)了茶敏，那么這個事件會執(zhí)行倆次下硕，那么配置了
emits這個選項的話玉工，就能很好的解決這個問題羽资，下去自己實驗一下，這篇文章中不做演示
我們看一下帶校驗和不帶校驗的emit事件一個例子
子組件Emiter.vue
<template>
<button @click="handleClick">點擊emit-click事件</button>
<button @click="handleOpen">點擊emit-open事件</button>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
emits: {
click: null,//click事件沒有檢驗
open: (value) => {
if (typeof value === "string") {
return true;
} else {
return false;
}
},
},
setup(props, {emit}) {
const handleClick = function() {
emit("click");
};
const handleOpen = function() {
emit("open", 1);
};
return {
handleClick,
handleOpen,
};
},
data() {
return {};
},
methods: {},
});
</script>
<style scoped></style>
父組件Emit.vue
<template>
<emiter @click="onClick" @open="onOpen"></emiter>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import Emiter from "@/components/Emiter.vue";
export default defineComponent({
components: {
Emiter,
},
data() {
return {};
},
methods: {
onClick() {
console.log("click me!");
},
onOpen() {
console.log("open me!");
},
},
});
</script>
<style scoped></style>
看一下結(jié)果遵班，控制臺輸出警告信息
image.png
