14Vue入门教程Vue组件间通信

　　1。前言
　　本小节我们将介绍组件间是如何实现数据通信的。包括父组件向子组件、子组件向父组件、兄弟组件、非关系组件之间的数据通信。组件通信是组件式开发中非常重要的一部分，也是组件式开发中的难点。在学完本小节之后，同学们可以通过反复地编写组件来加深印象。2。木子解释
　　组件是vue最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。我们需要使用特定的方式来实现组件间的数据通信，接下来让我们一个个介绍这几种类别的组件通信是如何实现的。3。父组件通过props传递数据给子组件
　　父组件通过props属性向子组件传递数据。子组件利用组件实例的props属性定义组件需要接收的参数，在使用组件时通过attribute的方式传入参数，如：在子组件内定义组件接收一个参数name｛props：〔name〕｝父组件使用组件时传递参数namechild：namenamechild
　　接下来我们看一个具体示例：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodyparentparentbodyhtml
　　运行案例可查看在线运行效果
　　代码解释JS代码第1418行：定义了组件child，并用props接收一个参数name。JS代码第412行：定义了组件parent，在组件中使用引用组件，并用attribute的方式将name传递给组件child。
　　在上面的例子中，组件Child接收参数name，name可以是字符串、数组、布尔值、对象等类型。但有时候我们需要给接收的参数指定一个特殊的类型和默认值，接下来我们就来介绍一下如何指定props的类型和默认值。3。1定义props的类型和默认值
　　在上面的例子中，props接收一个组件参数数组。实际上，props也可以接收一个对象，对象key为组件接收参数的参数名，其值是一个对象，属性type用来指定参数的类型，属性default用来指定参数的默认值：｛props：｛name：｛type：String，default：句号｝｝｝
　　接下来我们看一个具体示例：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodyparentparentbodyhtml
　　运行案例可查看在线运行效果
　　JS代码第1119行：定义了组件child，并用props接收一个字符串类型的参数name，其默认值是：句号。JS代码第310行：定义了组件parent，在组件中使用两次引用组件，的方式传递name值，使用默认的name值。
　　TIPS：注意，给数组和对象类型的props设置默认值的时候，需要按照以下的写法：props：｛detail：｛type：Object，default：（）｛return｛name：句号｝｝｝，loves：｛type：Array，default：（）｛return〔〕｝｝｝4。子组件通过emit传递数据给父组件
　　介绍完父组件传递数据给子组件的方式，我们再来看看子组件是如何传递数据给父组件的。子组件通过emit传递事件给父组件，父组件通过on监听事件：子组件定义事件this。emit（事件名称，传递的参数）例：this。emit（add，111）父组件监听事件的触发child事件名称事件触发的方法
　　具体示例：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodyparentparentbodyhtml
　　运行案例可查看在线运行效果
　　代码解释JS代码第1938行：定义了组件child，该组件接收两个参数：1。字符串类型的name，默认值为：句号。2。数字类型的age，默认值为18。组件模版中，通过按钮点击事件触发add方法，该方法内部通过emit触发事件add，并将age1的值作为参数传递。
　　JS代码第318行：定义了组件parent，在组件中使用引用组件，并绑定add事件，当事件add触发时调用methods中的add函数。5。非父子组件间数据传递
　　前面我们介绍了具有父子关系的组件是如何进行数据传递的。但实际上，并不是所有的组件都是父子关系，组件间还有兄弟组件、子孙组件、无关系组件，那么这些组件间是如何进行通信的呢？
　　相信在学完本节前面的内容之后这个问题并不能难倒大家。
　　对于兄弟组件的数据通信：它们有共同的父组件，我们可以通过父组件传递的方式实现数据通信。
　　对于子孙组件的数据通信：可以通过props的方式向下逐层传递下去，也可以通过emit将事件向上逐层传递。
　　对于非关系组件的数据通信：通过使用一个空的Vue实例作为中央事件总线。5。1通过公有的父组件进行非父子组件间的通信
　　假设现在有三个组件分别是、、，其中组件是和的父组件，和为兄弟组件，和组件间的通信可以借助来间接传递。它的流程大致是这样：通过emit将数据传递给，再通过props将数据传递给。
　　具体示例：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodypersonmodifymodifypersondetail：namename：countcountbodyhtml
　　运行案例可查看在线运行效果
　　代码解释JS代码第1830行：定义了组件detail，它从父组件接收name和age两个参数。JS代码第317行：定义了组件person，它通过emit将组件内输入的name和age传递给父组件。JS代码第3841行：接收了组件person传递过来的事件，并修改name和age。HTML代码第3行：将name和age传递给组件detail。5。2通过使用一个空的Vue实例作为中央事件总线
　　在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。首先我们需要做的是创建事件总线，并将它挂载到Vue原型上，在实例中通过this。bus。emit发送事件，通过this。bus。on接收事件。定义事件总线letbusnewVue（）Vue。prototype。busbus定义发送事件this。bus。emit（事件名称，data）定义接收事件并在回调中接收参数this。bus。on（事件名称，（data）｛｝）
　　接下来我们看一段具体示例代码：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodypersonpersondetailbodyhtml
　　运行案例可查看在线运行效果
　　代码解释JS代码第34行：通过newVue（）创建一个vue实例，并将它挂载在Vue的原型上。这样，在vue组件中可以通过this。bus访问到这个实例对象。JS代码第518行：定义了组件person，当点击修改按钮的时候通过this。bus。emit发送一个名为modify的事件，并将组件内输入的name和age作为参数传递。JS代码第1933行：定义组件detail，在组件内部通过this。bus。on监听名为modify的事件，当事件触发时执行修改操作。6。小结
　　在本小节，我们介绍了组件间的通信方式，主要有以下知识点：父组件通过props向子组件传递参数进行数据通信；子组件通过emit向父组件传递事件进行数据通信；兄弟组件通过共同父组件进行数据通信；通过使用一个空的Vue实例作为中央事件总线进行非关系层组件的数据通信。