28_尚硅谷_组件间通信的2种方式.avi原创

呃，我们下一个章节呢，是总结一下几个重要的技术，我们来看一下。第一个呢，是关于组件间通信的。其实第一种方式呢，就是通过pro来进行通信，所说通信就是数据传递啊。啊，这种方式呢，其实有两种可能性。主要是看传递的是什么东西，你传递的是一般数据。还是函数？对吧，也就是说我父组件。和子组件之间，我的父子件向子组件传递数据不就传pro吗？传1万数据的数据是不是到了支柱间曲线上，那如果我传的函数是为了什么呢？其实函数它写能写什么？我说函数传给子组件，子之前不是用来显示的，是不是用来调用的。

那调用的最终的目的是干嘛呢？是不是相当于通知副组件呢？能不懂，或者说数据是不是能可以从直线传递给副主义。你譬如说我要我要删除某一项，他是不是得告诉我一个删除的下标吗。能懂吧，那个下标那个index。是从哪传给谁的？是从父亲传给孩子吗？那是从哪来的？应该从子主业传过来，什么父主业？啊，其实最终传函数。它最终啊，数据的传递顺序其实是从子组件传，会传给什么呢？父组件。但是它有一个很大的弊端。什么弊端呢？

因为你要知道啊，只能父子之间传递，那我要是父组件想传递一个什么数据到孙子组件怎么办呢？对吧，先得传个再传递对吧，就不能一步到位吗。也就说白了，我就是咔嚓一下这么传过去对吧，或者说最终孩子向父组件啊发消息也一步回来，你别把函数传一步再传一步。太麻烦。对吧，或者说哎，我的兄弟组建之间要用pro该怎么办？兄之间通信该怎么做，是不是要借助于父亲啊，对吧，你去先告诉父亲，父亲再告诉他。是吧，就不能直接查一下。是不是用pro肯定搞不定。啊。我们要想能够去优化这个pro的传递方式，要用到另外一种机制。

啊，叫消息的订阅与发布机制。啊，订阅和发布是一个什么样的，大概一个什么概念呢？大家应该在那个微信上面订阅个公众号什么的。有订阅过吧？啊，我首先上来是不是要去添加订阅，添加订阅就相当于干了个什么事啊，绑定了一个监听。能不懂？有什么好处啊？他一旦发布了新消息，你就自动收到了吧？那我问你，他发消息是专门针对你一个人吗？不是，他就相当于发一个广播出去。对吧。啊，OK，而你呢，你相当于买一台收音机，调到那个频段。对吧，你调到平台，他一发他你就是不是收到了呀。啊，其实如果跟事件机制对应起来。

订阅消息相当于干嘛了？绑定监听。能不懂？而我们发布消息相当于什么呢？触发事业。你想嘛，触发事件，我的回调函数不就调用吗？真的吧？啊，OK。好这个地方啊，这是一种机制啊，这种机制最最终需要有库来去实现。啊，这里面就有一个比较典型的库，叫pop up JS，来，我们在get up上面看搜一下看有没有。回到get的主页啊。搜一下。

是不是有啊啊有这么的样的库啊OK。那它是一个什么呢？就是一个依赖于啊，这是free减二或者是免费的啊一个什么。啊，OK，发布订阅嘛，这是发布布发布的意思，Script订阅针对于什么语言，加script，那也就说别的语言也有这种机制，其这种机制不依赖于任何语言。宝啊，OK，那它怎么用呢？首先我要用，问它肯定要什么。先下载吧。下载，那下载有没有下载的命令给我。有。你说老师这么小，我要万一没看见我该怎么办呢？就下载重点就是这一个，它的名称是什么名称，对不对，因为我一般都下载最新的版本嘛，那我去哪看呢。

这个里面。你不用担心他没有，只要你掌握最基本的技巧，你肯定能搞定的，不就是这个名字吗？当然你也可以指定版本号吧。那如果我要同时指定版本号，我应该用什么？At就是在这个名字的后面加一个at不？在指定版本号能不能。好。那我们先下载一下呗。有当前这个应用是吧。来NPM因是杠杠C。接着了啊。是吧，Pop-GS走你。好。来啊，我们这个里面呢，有两个应用可以用到pop。我们当前这一个用户搜索的这个应用。

有需要的地方。为什么这么说呢？因为我们涉及到一个兄弟组建通信。我们是不是还要借助于复习呢？太费劲。就不能简单一点。是吧，OK。怎么说呢，来啊，我不过我还是先把它备份一个吧，别把它改坏了是吧，留他啊，这个叫user。好了吧，好在这个里面啊，我们来用，怎么用呢，大家看啊。呃，我们在这一个main和search之间是不是要进行通信设里面有一个事情啊，这个是不是点击啊那个按钮做的事情。前面我们是把这调用这个函数，把那个数据交给了呢。是吧，啊，能不能不这么做啊，你一定要通过副组件，这这太费劲了，说白了就这么一个事，大家看到我这个不要了，这个不要了。

能看到吧，啊，这那函数没有啊，那它还有吧。不要了。他要吗？也不要了。是不是瞬间世界干净了很多，对吧，好。那没有复心起中间作用了，那我们就直接一点对吧，直接一点我这个色系啊，我这个设计这东西也不应该有了吧。对吧，在这里搜索。搜索的话，我这边是不是相当于要告诉我的这个魅组件，你要该干什么事情呢？你说我现在是要去绑定消息了，是去什么订阅消息还是发布消息。我要干嘛？

你想我现在干嘛发布吧，因为我发生了某件事嘛。那么呢？你发生事情的时候，你不得通知所有关注的人吗？对吧，发布消息来看看怎么做啊这个地方。引入什么呢？我怎么知道呢，看一下它的这个东西，看下面的一些使用的。例。哎。这里有一个。这里还有一个，这就两个操作，上面是这个什么订阅subscribe订阅，订阅的时候要传些什么参数呢？我们说订阅相当于绑定监听，还记得绑定监听需要指定什么吗？世界名还有什么回调函数？对它也一样。它要指定消息明和你的轨调函数。那下一个操作这个地方publish什么意思，发布消息，那发布消息需要指定什么呢？我们说发布消息相当于是不是触发事件呢？那触发事件有什么关注点呢？触发的是什么事件呢？对不对？我要不要晚告诉他一些什么信息啊对不对？这个地方传两个参数，这个第一个参数是世界名，第二个参数我要不要给你携带什么数据？

能不能你想想看，我订阅了一个什么啊东西，它是不是有可能向外发布一些消息啊，所以消息不就是数据吗？能不能好来看他怎么做。我此时就应该去干嘛啊发布。消息什么消息，是不是搜索的消息，那我就取个概念叫什么呢？设计吧，设计的消息。可以吧，好，来写一写，先引入我的这个，引入的应该是他吧。

看的形式就它对不对。你懂吗？From。怕不萨？好调用它的什么方法。Publish指定两个休息名是什么？这个你设计一个，根据你你的意义，你要做的事情，设计一个名字就行。干嘛去，我现在发消息是不是让他去搜索去了，你说我给他发个什么消息。就设计嘛，告诉你，赶紧搜索去。对吧。给他，他需要教过他什么数据吗？如果要交，需要传第二个看出来。要不要给他什么数据。要不要档案？要啦，你这个设计内容你不给他，他怎么收呢？能不能看到啊，这样我就发了一个消息，消息名是社计啊，OK，消息的参数啊，其实数据就是我们的社区类。

好，那我的这命这边。是不是一上来是不是就要去订阅好一个消息。那我怎么时间一上来就订阅呀？我在什么时候订阅，是不是一上来就应该订阅啊，是怎么叫一上来啊，在初始化的过程中啊，一共就那几个方法。Component。还记得这是初二的一个方法吧，好，那我们在这里面干嘛句叫订阅消息，订阅什么名字消息啊，是恶行嘛，那必然呢，对吧？来先引入。跟它一样，Sub from g。来订阅吧。爹。

肖明。设对吧，还有一个什么，是不是处理这一个请求的回调啊，就接收到消息，我就应该调用这个回调函数吧，来看一下回调函数大概是什么样一个结构。这样一个结构。把它拿过来，这个结构说实话我特别想吐槽啊，是一个什么事呢？它这个设计真的是非常非常的不好，为什么这么说？因为它的这个回调函数其实两个参数，第一个是message，第二个take message，什么消息名，我要你有啥用？就这个东西。能到吗？我要的是什么？Date？就这样就导致于什么，导致于我总是要写这个没用的message。你你好歹你好歹设计成这样，那也我也可写可不写，你想让我想用就写，不想用不写了。

那你能证明什么？不能不能因为你名字变了，你接受的数据就变了，那也就是说你这么写的，这个才是数据。能懂吧，啊这个地方啊。还这么写？看到吧，我们这根本不用用的是他，他实际上不要写这个名字，这个名字不能见明之意。我们要根据我们实际接收数据的意义来取名。我们接受的这个什么对，Search name。是这意思吧，这样可能看着更懂一点，好了，那我们在这个里面啊，我们在这个里面干嘛去啊。大家想这个函数要说明什么，说明你指定了新的内要跟这个是一个意思啊。是不是，那你说我怎么办啊，就是把这一段。代码。给了什么？搞到剪切吧，这个也不要了，你们就没意义了。

懂不懂，我根本就不接受属性，什么属性呢？看懂吧，啊，还是这个设计类对不对。那么你。啊，OK，这样是不是，如果可以的话，是不是比开始要简单一些了，嗯，简单一些了，好。那到底行不行，这也不知道啊，是不是简单是简单，但是前提是要对呀，好，我当前启动没有啊。看一下。呃，这个属性，但是没有定义，诶我这个这个里面啊，这这个前面应该有一些有一些说明的啊，就这一个是吧，我根本就没有什么没有干掉他们。试一试吧，好好了吧，好了，以后来试试看行不行啊，WW，走你。

嗯，又来了这种，这个错误大家经常可能犯，Set of。晒的谁觉的哟？This，我们经常不this点吗？怎么回事呢？This，不对。我要告诉他一个解决这种类似问题的一个终极方法，很简单，一旦是回调函数都写进的函数，你就记住这一点就行。这是一个回调函数，这样一个回调函数this肯定不是组件对象。因为这个这个回调函数是他维护的，他怎么知道能知道是组件对象呢，我。咋办？线头函数不想那么多，你也别用，半也都是以前没有箭头函数的时候的办法。咱是一个新式程序员。嗯，OK。好。

来看一下。SS。是不是出来了没问题吧，没问题啊。哎，还是那句话，收紧了。可以吧？这里面你能看到啊，我们兄弟之间通信用这种pop的方式是不是非常方便呢？能扫很多代码啊。好，除了这个兄弟组件之间的。还有一种啊，就是我们的这个。这个comment这种就是我们是不是要传多层。是不是也觉得比较烦呐，这个地方。啊，我把这个备份一个啊，看下C看下V。这个呢，是user r吧。

可以吧，好，把这个里面的先给他干了。干了以后呢，把这个这个comments里面的这一部分啊，给它拷贝一份过来。好，我们把它也改一改。他有个什么问题呢。他的一个我觉得写起来不太爽的地方在于这里。在我的NP。你看我们这里面有一个函数，要不断的传递。什么意思呢？就是这个list传一个delete。我先是不是传给了我的历史的组件，历史的组件用吗？他不用，他又传给了谁挨。费了老劲了。就不能简单一点，你就不能直接一点。对吧，OK，什么意思，看着我把这个。干掉是吧？啊，OK，那干掉以后就没有必要声明了吧？啊，你要声明了又干掉了，那不就矛盾了吗？

好，接着把这一个。也给了是吧，干掉啊，OK，好，干掉他之后我这边也不用生命了。是吧，好，但是有一个问题啊，有一个什么问题呢？我这里面啊，当我点击删除的时候，我最终是不需要去删除啊。怎么办？我现在此时要干嘛，是订阅消息还是发布消息？你说老师我这怎么看不出来，到底订阅发布了，你去看是是不是发生事件呢？发生事件的地方才需要去发布消息，我现在发生事件没有。发现了，我点击了删除按钮了，怎么没发生事件呢？很简单一个事情，懂不懂？那此时我就应该干嘛去啊，来引入。

G，对吧。来发布消息爹。Happiness呗。是吧，消息。就顶delete呗，对吧，当然你也可以写别的名字啊，比如说你你叫迪delete comment行不行，可以，你只要名字一致就行。接着了。要不要给他传递什么数据？穿什么下标吗？他不需要下标吗？他需要什么我就给他传什么。能看到不啊，OK，我要传多个数据，我怎么办？就封装成对象呗，是吧？啊，非常简单啊，好，那我在此时去发布了消息，那我应该在里面是不是订阅消息。那我什么时候订阅呢？

啊，这个绑定阶梯不一上来就应该绑定好嘛，对吧，固定的说实话其实套路都是一个。好吗？Component did mount。干嘛去订阅消息，订阅什么名字消息，这不就是这一个吗？对吧，别搞差了啊，这个名字一定不能差了，对吧，好来吧。啊，需要引入是吧，引入这里面写过。啊，看见C。啊，看着V。哎，完了啊，这个APP被我一下子干掉了啊。还是啊，别为了他们简单，一直就搞到下面去啊，一定要有顺序。好来弄一弄呗，地面消息它点。

消息。掉水了。指定回调函数吧，指定回调函数，我是不是那回调函数这么写的啊，箭头函数忘了是吧？不能不能一定不能忘了，这个是箭头函数。箭头，还有这里写什么，还有一个，第二个是什么也要写data，写看不出来index。怎么着，最终我去调用谁去是不是调用它呀。是不是那很简单的什么index。对吗？能看到吧，啊OK。

其实吧，就是我觉得我我在此时此刻，我觉得这这这个这个东西特别让人受不了，如果他是这样一个顺序，我能把这个代码写的很简单，就如果他接受的参数是这样顺序的话。啊，我可以把那个写的很简单，什么意思呢？我可以这么写的，本来就是，我为什么特别讨厌他，就是因为他的这个设计让我不能把代码简化。那这个不行，不行的原因主要有一个问题，就是他是第一个传参数传的message。第二个参数才传的index，然后我现在只接收一个参数。能看到吧，我就只能接受一个，我如果这么写，我就这么写，我这个不用，第二个，第一个不用。那我就可以。那我就可以这么想。估计他还带不动。看不懂。

就这么，我就这么定着我的这个就可以。啊，如果你看懂，你应该至少值个12000。啊，对。啊，如果你看不懂，那你应该是1万以上的。啊看啊，什么意思，为什么这样可以？你想想看，我第一个这个这个第二第一个第二个参数要传什么，是不是传一个函数。对吧，而且这个函数是不是应该接受两个参数，第一个是me，第二个是index，那我这个函数满足这个条件呢？我咋不满足了，不一样，其实意思我都已经已经被搞好了呀，这是间的函数啊。知道吗？就是很好啊，非常好。但就是不行。啊，就不行的原因就在于。

就在于我肯定不会这么定，我肯定这么定的，你前面第一个麦那不有病吗？你又不用。对不对，你肯定这么定，那这么定义以后就不行了。为什么呢？因为他调用这个函数的时候，它会第一个参数传Mac极值，第二个参数才才下标，那就不对了，那这个接受的不是下。知道不，那我只能自己，那我只能自己在外面先套一个函数了。啊，OK，这个叫message，这个叫什么index，烦死。啊，这个写什么叫什么index。啊，OK，你去看啊，很多并不是所有的库都能像，都让你感觉啊，涉及到十全十美，其实这个这个库已经很好用了啊。是挺好用的，但是就在这一点上面，细节上面我觉得还是有纰漏的。

OK，来我们来看一下我们当前这一个，看它行不行是吧，也不知道行不行。好，现在有问题，我们来看一下，呃，说下面没有index.gs。我有吗？有吧，啊，这个应该是我考来考去他已经乱套了。重新跑一下，因为刚才我删了。有吧，390。周林。号码。啊。这个啊是挺重要的，就是这一个啊，消息订阅与发布机制。它能让我们的这种兄弟之间的组件通信，以及多层组件啊，多级组件的通信变得更加简单。

啊，可以用一下pop，其实还有一种方式。用什么呢？但是呢，现在还没讲，因为最后我们才讲。啊，OK。啊，后面呢，我们要花一天时间才能讲清楚它。这个非常这个非常重要啊，因为因为在面试的时候就来通过问他来检测你的rap学的好还是不好，如果你这个都学会了，那肯定是不差啊，因为二都不算多的是吧。好，行。