Is passing parent method as props with @ correct approach?

[G-N555]

I'm working on project and see below code that parent component is passing the method down to the child component as props using @ like below.

Codes

// App.vue
<template>
  <child-component @foo="clickEvent" />
</template>

<script>
  import ChildComponent from './components/ChildComponent.vue';
  
  export default {
    name: 'App',
    components: {
      ChildComponent,
    },
    setup() {
      const clickEvent = () => {
        console.log('click event called');
      };
  
      return {
        clickEvent,
      };
    },
  };
</script>

// ChildComponent.vue
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
  export default {
    name: 'ChildComponent',
    props: {
      onFoo: {
        type: Function,
      },
    },
    setup(props) {
      const handleClick = () => {
        props.onFoo();
      };
  
      return {
        handleClick,
      };
    },
  };
</script>

What I initially thought is parent component(App.vue) is listening event named "foo" that is emited in child component.(something like emit("foo"))
However, I never see any "emit" inside child component, instead I see that child component takes onFoo as props from parent.

I'm kinda confuse because I thought we should use v-bind when passing down props to child component(:on-foo), but it seems both scenarios(:on-foo or @foo) work actually.(I mean both shows "click event called" on console)

example
@foo

Can anyone explain why @foo is doing the same behavior as :on-foo and is @foo approach is correct one to passing down method as props?
Also appreciate if you could share the link of doc where explain about it.

Thanks in advance. 🙏

[Shyam-Chen]

Props support implementation of default behaviour
Event dispatcher does not have default behaviour

[G-N555]

@Shyam-Chen
Thank you for the reply, but could you elaborate more?

@food is working in child component because of default behavior of props? And the reason why @foo is used as props because no emit inside child component?

[Shyam-Chen]

https://play.vuejs.org/#eNp9U8Fu2zAM/RVNFztAZ2PoLXOCbkWLbYdt2Absokvm0IlbWRIkOUsR+N9HUo7jYlt9sE3ykXyknk7ynXPFoQe5lFWofeuiCBB7t1am7Zz1UZyEh0YMovG2ExlCsyl0azs3+ouSDKqUvVVGmdqaEEUXdmJF+Xn2AbS24qf1evsqWxCk6U0dW2tE93Rvbb4QJ2WEoESrodB2l2cjOcIPylRlYojc0IjQOb2JgJYQ1f7N+nTifsNQlWixtzWuj+LwurNb0CslMa6kKFOQ2d801lKAKIyhqpyVllcyBuTUtLviIViDe2KaStaY3mrwXxwNEZRcpgEotsFZf39iX/Q9XJ399R7qx3/4H8KRfEp+9RDAH0DJKRY3fgcxhe++f4Yj/k9BHKzXiH4h+A1wnz1xTLD3vdki7RmO2X7kI23N7ke4O0Yw4TwUESXkwHgl8Txoc/8b/UL3urjmPDw73OJZHhehzSW2haY1XNcaMPGZ3FhPcGQk4ja95u8cn3N7560LExVr8EgnC5/45GAp7kfVjdPjM9ZcClwMl92OsTRxevOlyLnDKNQk1Sj2G9rnrW7rR9Q6yni1vjR9pubphixwpBTnggVTzc/egQemP49NvblUm7U6U+QcojhQ+ks35FcfI1422gIKPlmo+JuayqFnVlzJdZqng6pMyL/uxfAHmKhmZw==

[G-N555]

@Shyam-Chen
I understand @foo works in child component when declare props with prefix on in child component.
My question is why it works.
What I know is when pass props usually use v-bind(:) and v-on (@) is used for dispatch event with emit.
However, like your example, v-on(@) is used as props and don't know why it works.

Maybe I just should understand @ is also used a symbol for props and this case I have to set prefix on in child component? 😅

[Shyam-Chen]

For JSX users.

https://vuejs.org/guide/extras/render-function.html#v-on

[G-N555]

Sorry, I unmarked the answer because I start feelint it's is not fully covered my question.
The link just says prefix on + uppercase is treated as event listener when you declare JSX and it's equal to @{event}.(onClick === @click)

However, I found that using @ instead of : is working as a symbol of prop not event listener.(And you can pass any type as props, as long as you define props in child component with on)

@ is just used as symbol of passing props to child component.