父组件直接属性传函数给子组件 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>