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

[cutemurphy2888]

可以看见子组件 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>

[ChefIsAwesome]

事件一般是一对多的概念，这种一对一的确实没必要用事件。我写 vue 的时候都是直接传函数，保持一个单向的传递才不容易出错。

[waiaan]

这个跟父组件和子组件的功能有关，父组件功能就用父组件的函数，子组件的就写在子组件里。

[WhateverYouLike]

我老大喜欢传函数进子组件，我喜欢在子组件里 emit 。我认为，父组件的函数应尽量由父组件自己调用。一个比方，假如有客人来你家，emit 就是门把手，这个门把手把你的世界和外面的世界分隔开了，很有安全感；传函数的方式就好像你房间中央有个传送门，指不定哪天有个人传进来拉了一泡便便就跑了。

不过感觉只要是稍微复杂点的业务逻辑，是不可能一点函数也不传的，而且 emit 有种飞线的感觉

[qxqsxbd]

父组件传函数的话，子组件还得判断传了还是没传，抛事件的话就可以无脑抛了

[cutemurphy2888]

@qxqsxbd

fn && fn() 不就完了。

[WhateverYouLike]

@cutemurphy2888
typeof fn === 'function' && fn()

[cutemurphy2888]

@WhateverYouLike props 里写一下就行了
type:Function

[charlie21]

选择在子组件里 emit , 则意味着开发者写过 angular @Output Emitter https://angular.io/guide/inputs-outputs

选择传函数进子组件 , 则意味着开发者写过初阶 react , 因为 仅对于 `子组件如何改变父组件状态` 这个事而言
低水平 / 初阶
https://stackoverflow.com/questions/39041710/react-js-change-child-components-state-from-parent-component
高水平 直接封装成 context provider, 顺便攻克了 prop drilling 问题
https://kentcdodds.com/blog/how-to-use-react-context-effectively