Vue3.0新特性----emits选项

emits

  • 官方文档传送门
  • Vue官方建议我们在组件中所有的emit事件都能在组件的emits选项中声明
  • emits参数有俩种形式对象和数组,对象里面可以配置带校验emit事件,为null的时候代表不校验,校验的时候,会把emit事件的参数传到校验函数的参数里面
  • 当校验函数不通过的时候,控制台会输出一个警告,但是emit事件会继续执行
  • 记录一个坑:比如你emit事件的名称正好和原生事件的名字重复了,那么这个事件会执行俩次,那么配置了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>
看一下结果,控制台输出警告信息
image.png

推荐阅读更多精彩内容