V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cutemurphy2888
V2EX  ›  Vue.js

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

  •  
  •   cutemurphy2888 · 148 天前 · 987 次点击
    这是一个创建于 148 天前的主题,其中的信息可能已经有所发展或是发生改变。

    可以看见子组件 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>
    
    7 条回复    2022-03-23 13:03:19 +08:00
    ChefIsAwesome
        1
    ChefIsAwesome  
       148 天前
    事件一般是一对多的概念,这种一对一的确实没必要用事件。我写 vue 的时候都是直接传函数,保持一个单向的传递才不容易出错。
    waiaan
        2
    waiaan  
       148 天前
    这个跟父组件和子组件的功能有关,父组件功能就用父组件的函数,子组件的就写在子组件里。
    WhateverYouLike
        3
    WhateverYouLike  
       148 天前 via Android
    我老大喜欢传函数进子组件,我喜欢在子组件里 emit 。我认为,父组件的函数应尽量由父组件自己调用。一个比方,假如有客人来你家,emit 就是门把手,这个门把手把你的世界和外面的世界分隔开了,很有安全感;传函数的方式就好像你房间中央有个传送门,指不定哪天有个人传进来拉了一泡便便就跑了。

    不过感觉只要是稍微复杂点的业务逻辑,是不可能一点函数也不传的,而且 emit 有种飞线的感觉
    qxqsxbd
        4
    qxqsxbd  
       148 天前
    父组件传函数的话,子组件还得判断传了还是没传,抛事件的话就可以无脑抛了
    cutemurphy2888
        5
    cutemurphy2888  
    OP
       147 天前
    @qxqsxbd

    fn && fn() 不就完了。
    WhateverYouLike
        6
    WhateverYouLike  
       147 天前 via Android
    @cutemurphy2888
    typeof fn === 'function' && fn()
    cutemurphy2888
        7
    cutemurphy2888  
    OP
       147 天前
    @WhateverYouLike props 里写一下就行了
    type:Function
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3800 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 04:06 · PVG 12:06 · LAX 21:06 · JFK 00:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.