Why does vue emit propagate to parent?-CodePudding

I'm new to Vue. I have a child component like below. I added a validator via the 'emits' property and I assumed that if the validator fails then the parent event handler doesn't get called but it does. I also don't see a way to validate the input in the parent or in the child. I know I could add a method in the child component that I assign to the emit property and check it in the child and then only call $emit' if it returns true but it seems backwards. I'm sure I'm missing the point here, someone please clarify because it seems to me that the 'emits' property validator is only for debugging purposes and doesn't actually modify the app behavior, just throws a console warning. To me that is a bug waiting to happen. Is there some vue config setting that I need to change to enable the behavior I was expecting? What am I missing? (btw, when I run npm show vue version I get 3.2.45 if that would matter.

The console showing that the parent handler was called.

Child Component:

<script>
export default {
  data() {
    return {
      username: "",
      age: null,
    };
  },
  emits: {
    "new-user": function (obj) {
        return obj && typeof obj.username == 'string' && typeof obj.age == 'number';
    },
  },
  methods: {
    newUser() {
        const output = { username: this.username, age: this.age };
        this.$emit("new-user", output);
    },
  },
};
</script>

The parent component:

<template>
  <h2>Hello</h2>
  <user-data @new-user="newUser"></user-data>
</template>    
<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    newUser(val) {
      console.log('emitted newUser',val)          
    },
  },
};
</script>

CodePudding user response：

You're spot on.

Emit validation only shows a console warning. It is not a mechanism to not emit something.

Similar to prop validation, its primary use is for development. Very useful for large teams or if you're making a component library.

CodePudding user response：

Passing a function to emits will not affect whether the event is emitted, it is only meant for validation. See docs here

though I see that it's not very clear from the docs:

export default {
 emits: {
   submit(payload) {
     // return `true` or `false` to indicate
     // validation pass / fail
   }
 }
}