“后端朋友来学前端。”Vue中的props配合自定义方法实现组件间的通信，在本文中，我们也将使用props和方法来实现组件间的通信。题目：组件是Vue中一个非常重要的概念，是模块化开发的基础。在使用vue的开发过程中，每个页面都是由多个不同的组件组成的。如下图所示：由于存在多个组件，因此需要实现数据动态化，实现多个组件之间的通信。组件之间的通信无疑是这样的：父子组件之间的通信祖孙之间的通信（包括多代）兄弟组件之间的通信传递、自定义事件实现组件通信目前我只学了这些，正在更新中持续不断，不要惊慌。1、Props配合方法回调实现组件通信。我们先初始化一个项目，然后在此基础上进行操作。源码及相关项目代码均在文末仓库中。删除一些无用的，保留这些就足够了。需求：我们需要在HelloWorld组件中添加一个按钮。点击后，可以修改和显示从父组件传过来的值。想一想：首先，我们不能直接改变子组件中的值，这是vue不允许的。那么我们真正的改变值的方法应该写在父组件中。最后只要点击子组件的按钮，调用父组件的修改方法就可以成功了。所以第一步，我们先在父组件中定义一个修改msg值的方法。methods:{updateMsg(){this.msg='大家好，我是博主宁在淳'}}定义完成后，我们应该如何传递给子组件呢？让子组件可以调用这个方法？通过Props，子组件中的props可以接收函数类型。然后我们可以将我们的功能传递给子组件。写到这里之后，我们还需要在子组件中接收：这个才算接收完成，最后要做的是触发它拉动。我们可以给按钮绑定一个点击事件。点击修改msg的值这个其实是可以实现的。但是这样限制太多了，我们一般都要传值，所以算是通信，稍微改一下吧。在应用程序组件中，我们将收到一个值。methods:{updateMsg(value){this.msg=value}}在子组件中更改如下图：也可以达到同样的效果。上面是实现父子组件之间的通信，那么兄弟组件呢？后代呢？我应该怎么办？因为代码很简单，我就不重复操作了，只是做了几张图帮助大家理解。2.Props搭配自定义事件，实现组件通信，需要的请看官方文档。说起来，这个props是配合自定义事件来实现组件通信的，改动的地方还是挺少的。1.第一步：将App组件中绑定方法名前的引号改为@符号。2.第二步：子组件不再需要在props中接收，调用父组件的方法也发生了一点变化。这样就可以达到和第一种方法一样的效果。如果是父子组件，我觉得这个方法很方便。不需要使用props来接收，直接绑定即可。但是对于祖孙之间的交流，还是很麻烦的。它必须先传递给子组件，然后才能传递给孙子组件。子组件就是孙子组件。兄弟组件也和之前类似。这种方式更适合父子组件通信，比较合适。后记大家加油！！！文中如有不足之处，请及时指出，在此表示衷心的感谢。纸上谈兵的成果总是肤浅的，我知道这件事必须要做。大家好，我是博主宁在淳：一个热爱文艺却走上编程道路的首页青年。希望：当我们相遇时，我们将有所成就。组件通信方法还在写中，方法还挺多的。这些只是前两个要学的，重头戏还是要在后面。
