父组件直接属性传函数给子组件 VS 子组件 emit 方式的区别？

可以看见子组件 props 里头接了这个函数，而且标明了是一个 Function 类型，注意不要写成 function ， 容易抛错。 现在有个问题就是这种方式，父给子直接方法，子调这个方法，跟子组件 emit 一个方法，父再来接有什么区别。

<code>

父组件
我们 qq 这个属性，传了一个 qq 方法给组件。


<img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
  <CuteMurphy msg="Welcome to Your Vue.js App" @shit="shit" :qq="qq" />
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import CuteMurphy from "./components/CuteMurphy.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    CuteMurphy,
  },
  methods:{
    shit(){
      console.log("shit");
    },
    qq(msg){
      console.log(msg);
    }
  }
};
</script>

子组件：
可以看见子组件 props 里头接了这个函数，而且标明了是一个 Function 类型，注意不要写成 function ，
容易抛错。
现在有个问题就是这种方式，父给子直接方法，子调这个方法，跟子组件 emit 一个方法，父再来接有什么区别。

<template>
  <div @click="handleClick">{{msg}} age is {{age}}</div>
</template>

<script>
import {ref, watchEffect} from 'vue';
export default {
  name: "CuteMurphy",
  props:{
    msg:{
      type:String
    },
    qq:{
      type:Function
    }
  },
  setup(props,ctx){
    const age=ref(32);
    const handleClick=()=>{
      ctx.emit("shit");
    };

    watchEffect(()=>{
      props.qq("jiajia");
      console.log(age.value,33);
      console.log(props.msg,777);
    });

    return {
      age,
      handleClick
    }
  },
  data(){
    return {
      username:"11wangjun"
    }
  },
  methods:{
  }
};
</script>

<style scoped>
</style>

</code>