Vue神器：父子组件通信技巧大揭秘

一、父组件向子组件通讯

你应该知道，父组件和子组件之间传递数据是常事儿，平时我们都是用Props来搞定这个事情的~只需要把props在子组件里设定好，就能从老爸那里接到各种各样的信号，然后就踏实了。这种编程方式简单易懂，将来维护升级也会方便很多哟。事实上，依赖Props我们可以传递文章啊、布尔值啊、甚至整个对象都没问题！

哦豁~要用到子组件了就得挪 props来拿想要的信息哈。比如，要用子组件，就让父组件给数据绑上去。这样子组件就有数据，自个儿搞定显示部分咯～这个方法方便直接效果棒棒哒，在 Vue里可是大家最喜欢用的！

你知道吗？props还有另外俩实用小助手——$attrs和$listeners。当父组件给咱们塞一大串看晕人的属性时，别急，瞧！这俩马上就来救场！善用他们的继承和应用功能，让讨厌的属性和事件统统解决丝毫不费力！

二、子组件向父组件通讯

在Vue里边儿，记得跟父亲打个招呼！简单得很，就是用$emit 这个函数向父亲发送我们要说的话。这样子一来，孩子就能主动跟父亲说话~

比如，如果你需要子组件做点儿啥，那么只要利用我们的$emit工具发送指令和数据给它就OK。这时候，老爸（父组件）就能收到这条信息，并在相应的处理函数中轻易就能拿到要用的数据，这样就能轻而易举地实现组件之间的通讯咯。这个办法真是太有用了，不论多么复杂的交互问题都能迅速解决！

  

    
  


import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello, child component!'
    }
  }
}

说起嵌套组件，有时底楼的小家伙也需要闹点动静。这时候，Vue就能派上大用场！它有两个法宝——provide和inject，弄懂了它们，多层嵌套都没问题～就在主组件里把数据或函数准备好给孙子们用，再利用inject将其“挖掘”出来就成了，是不是超简单？

三、跨级兄弟组件通讯

  

    
{{ message }}
  


export default {
  props: {
    message: String
  }
}

有时候亲人聊天说得好好的，突然就没话说了。这事儿也怪不着Vue，别急别慌，咱还有招来对付！

哈喽，搞定跨级通讯其实超简单的！只要用上“事件总线”，就像搞出个空Vue实例或者设置一下通用事件总线对象。想加什么事件处理方法都可以。等要用到跨级通讯时，直接引用这个总线对象，马上就能开始监听和发消息了～

想要聊天信息全组件都统一吗？试试Vuex，它就像个司令官，统领着所有组件的状态。它会将状态统一存放，方便大家查看。关键是，状态一变，它立马就知道了，立即作出反应！

四、动态组件间通讯

  

    
  


import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  }
}

Vue动态组合作挺炫的！但别忘了解决组件通信问题，这样你才能更得心应手地动态加载出来。

就像动态加载遇到的那个烦人问题呢（就比如那个啥），就是不知道该加哪个小零件，所以用属性传数据这个招儿就行不通咯。

  

    
{{ $attrs.message }}
    Click me
  


export default {
  
}

搞定这个问题？咱们直接利用事件总线或是Vuex这种全球状态管理工具，就能实现各组件间的信息互享！

就是找个比3多2的两点之间的关系！

看，某些好像关联度不大的东西其实还蛮有关系的！虽然不能直接接触，但却需要相互合作，这样才能把事情做好。

听说过Vuex？它就像你家的小助手！你得让各种小东西串通起来，比如需要分享的资源或看似无关却有帮助的信息。这样的话，不仅大家都乐呵呵的，效率也提高！

六、插槽(slot)与scoped slot 间通信

  

    
{{ message }}
    Send message to parent
  


export default {
  data() {
    return {
      message: "Hello, parent component!"
    }
  },
  methods: {
    sendMessage() {
      this.$emit('message', this.message);
    }
  }
}

在搞vue时，常常会遇到头疼的问题，比如什么父模板，插槽，scoped slot，真是让人有点想砸电脑！

下一步就是要让’scoped slot’和’slot’可以互相讲话了，比如说，给’provide’加点料，那’inject’就不用愁！

  

    
  


import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log("Received message from child component:", message);
    }
  }
}

七、服务(Service)模块与全局注册模块间通信

搞定Vue项目，别着急，一点点来呗，分成几块儿干，甚至还能直接搞个服务或挂到系统上。

就是一点点累呗，如果你还要把Service跟那些都注册了的家伙们扯上关系，那就找Event Bus或Vuex这些小兄弟替你传话！

今儿个要稍微给你们说几点那个啥，怎么样去搞出各种神奇的Vue组件呗？重点不在这里，关键是这些组件互相能有交流沟通的能力哈~学会这个，以后你用Vue组件就可以更加得心应手了，提升你们前端开发的那啥开发效率也不是不可能

  

    
{{ message }}
    Send message to parent
  


export default {
  data() {
    return {
      message: "Hello, parent component!"
    }
  },
  provide() {
    return {
      sendMessage: this.sendMessage
    }
  },
  methods: {
    sendMessage() {
      this.$emit('message', this.message);
    }
  }
}

。