08第4章Vue.js组件第2节组件通信

第4章：Vue.js组件《Vue应用程序开发》

010203005Part14.1组件的基本使用Part24.2组件通信Part34.3动态组件Part44.4章节案例目录CONTENTS4.2.2组件通信组件是Vue.js最强大的功能之一，组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。使用组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通信方式根据组件之间的关系有不同之处。组件间通信包括三种情况：父组件向子组件通信、子组件向父组件通信、非父子组件之间的通信。1.父组件向子组件传递数据通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。这个正向的数据传递就是父-->子组件通信。在Vue组件中是通过props来实现的。props的值有两种：一种是字符串数组，一种是对象。1.父组件向子组件传递数据上面实例中，数据传递的步骤可理解为：子组件在props中创建了两个属性["message","ImgSrc"]，用以接收父组件传过来的值；在父组件中注册子组件；在子组件标签中添加子组件props中创建的属性；把需要传给子组件的值赋给该属性。props字符串数组中的message和imgsrc会作为组件my-component的属性来赋值父组件要传递的数据，子组件中渲染出来的数据是来自与父组件。1.父组件向子组件传递数据由于HTML特性不区分大小写，当使用DOM模板时，驼峰命名（ImgSrc）的props名称在组件中使用时要转为短横分割命名（img-src），否则浏览器会警告，无法正常渲染图片。1.父组件向子组件传递数据所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。2.子组件向父组件传递数据当子组件需要向父组件传递数据时，就要用到自定义事件。v-on除了可以监听DOM事件，还可以用于组件之间的自定义事件。2.子组件向父组件传递数据子组件通过$emit()来触发事件，父组件在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件2.子组件向父组件传递数据子组件通过$emit()来触发事件，第一个参数是事件名称，第二个参数是传递参数。3.非父子组件通信非父子组件之间通信时，需要引入一个事件总线实例（bus）作为媒介，通过bus触发事件和监听事件来实现组件之间的通信和参数传递。这类似于子组件向父组件通信，但是利用了一个新的Vue实例作为媒介，而不是以当前Vue实例作为媒介。3.非父子组件通信使用空的Vue实例作为中央事件总线（bus）。bus同时负责触发和响应事件，起到了中介的作用。4.2.4创建自定义组件在项目开发的时候，通常需要自己开发组件方便在项目中复用，下面我们通过一个实例完整的学习一下如何创建自定义组件。4.2.4创建自定义组件当点击“请选择课程”的时候，课程列表会显示出来，选择一门课程以后，被选择的课程就会显示在页面。实现该实例首先要进行组件注册，该实例使用全局组件和局部组件都可以实现。4.2.4创建自定义组件代码略代码中使用了组件嵌套，在父组件中使用了子组件，并且实现了组件间的通信。父组件将值下发给子组件，子组件使用v-for将列表值显示出来，这时我们只要改变父组件的值，子组件中列表值也会改变。我们使用$emit()触发事件实现点击子组件的列表项时，就将该列表项的值传到父组件里。【提示】：参考上述代码，尝试将数据放在外部（Vue实例里），我们希望从外部将下拉列表的数据传给父组件，父组件再将它下发给子组件，使用prop完成这个过程。4.2.3内容分发Vue框架实现了一套内容分发的API，使用<slot>标签作为承载分发内容的出口。官网对<slot>的解释为“插槽”，也就是说slot是一个可以插入的槽口，比如插座的插孔。当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫内容分发。换句话说，当组件不确定自己的内容是什么，内容由父组件决定时，就会使用slot。内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，从而实现组件的高度复用，编写的组件更加灵活。4.2.3内容分发Vue框架实现了一套内容分发机制，其核心是通过<slot>标签作为“插槽出口”，实现父组件向子组件插入动态内容。简单来说，当子组件的部分内容需要由父组件决定（而非子组件自身固定）时，就可以使用插槽：子组件通过<slot>标签预留位置（固定部分），父组件在使用子组件时，将动态内容写在子组件标签之间（动态部分），这些内容会自动填充到子组件的<slot>位置。这个过程就是“内容分发”。1.单个slot在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽）。在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。1.单个slot上例子组件my-component的模板内定义一个<slot>元素，并且用一个<p>作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；