Vue.js前端开发框架应用（微课版） 课件 第六章 Vue.js组件

Vue.js前端开发框架应用Vue.js组件目

录组件基础组件高级应用Vue.js组件在前端开发中，组件指的是将页面划分为独立的、可重用的部分，每个部分定义为独立的模块，模块有自身的运行逻辑和与其他模块交互的逻辑。在实际应用中，组件常常被组织成层层嵌套的树状结构。使用组件和嵌套使用html元素的方式类似，图中的页面由6个组件构成，Root组件直接包含了Header、Main和Aside三个组件，Main组件直接包含了两个Article组件，Aside组件直接包含了三个Item组件，Article组件和Item组件有重用。Vue.js为使用和创建组件提供了很好的支持，无论是将现有组件集成到项目中，还是创建和分发组件都很方便。Vue.js组件一、非构建方式定义组件

直接引入使用Vue.js框架时，组件以一个包含特定选项的JavaScript对象来定义

【案例6‑1】直接定义和使用组件。Vue.js组件二、构建方式定义组件使用构建方式开发基于Vue.js框架的前端项目首先需要创建初始项目，按照教材第一章1.2.3节介绍的方式可快速创建好初始项目。使用工具创建的初始项目内容完整但结构稍显复杂，对于初学者来说并不友好，可以先删除初始项目中的无关内容，保留其项目主结构，在此基础上再来开发。

可删除的部分有src文件夹下的assets文件夹与components文件夹和这两个文件夹包含的全部内容，修改main.js文件，删除其中对main.css文件的引用代码，同时修改App.vue文件，仅保留template、script和style三个代码块标记即可。Vue.js组件二、构建方式定义组件

Vue.js构建方式定义组件最直接的做法就是在上述初始项目中的App.vue中添加组件代码和模板，App.vue是初始项目的根组件，初始项目的main.js中的代码会将根组件挂载到index.html中的目标元素。对于初始项目来说定义和使用组件主要编码的部分就是App.vue文件。

【案例

6‑2】构建方式定义和使用组件。Vue.js组件三、组件的注册与使用使用Vue.js自定义的组件，在使用前需要先被“注册”，这样Vue.js应用实例才能在渲染模板时找到其对应的实现。组件注册有两种方式，全局注册和局部注册。

【案例6-3】局部注册并使用组件。局部注册的组件需要在使用它的父组件中显式导入。局部注册的组件只能在导入它的父组件中使用。局部注册组件的优点是可以使组件之间的依赖关系更加明确，并且在构建方式创建项目时局部注册但并没有被使用的组件会在打包时被自动移除。

全局注册（案例6-1）指的是使用Vue.js应用实例的component()方法，让组件在当前Vue.js应用中全局可用。目

录组件基础组件高级应用Vue.js组件一、组件插槽组件插槽可以用来向组件传递内容，就像往html元素中传递内容一样。

【案例6‑4】组件插槽应用。在定义组件时，可以使用slot元素作为一个占位符，组件被调用时传递进来的内容就会渲染在这里。Vue.js也支持具名插槽和作用域插槽。Vue.js组件二、传递数据当构建一个门户类Web应用时，往往需要一个显示新闻的组件，所有的新闻采用相同的视觉布局，但显示不同的内容，这就需要向组件中传递数据。对于显示新闻的组件来说，标题和内容等就是需要传递给组件的数据。

【案例6‑5】组件传递数据。向组件传递数据需要用到props选项。props是组件中的特殊属性，需要传递给组件的数据必须在其props列表上声明。Vue.js组件三、组件中的事件

Vue.js中的组件是可以相互嵌套的，当一个组件在使用其他组件时该组件可被看作父组件，被使用的组件可被看作子组件。在项目开发中经常会有子组件与父组件交互的需求，例如子组件提交的数据通过父组件来呈现，这种情况可以通过子组件触发自定义事件让父组件来监听实现。

【案例6‑6】组件事件应用。事件的名字实现了自动的格式转换匹配，子组件触发了一个以驼峰命名法（camelCase）形式命名的事件，在父组件中可以使用短横线（kebab-case）形式命名来监听。调用者模板里的事件名do-submit对应的组件中声明的事件名为doSubmit。Vue.js组件四、数据依赖注入

当需要从父组件向子组件传递数据时会使用Props，但有时项目有多层级嵌套的组件，如下图所示。这种情况下组件形成了树状结构，当某个深层的子组件需要一个祖先组件中的数据时，使用Props必须将数据其沿着组件逐级传递下去，而这种做法会带来很多问题。Vue.js组件四、数据依赖注入

使用组件的数据依赖注入可以解决这一问题。父组件相对于其所有的后代组件，会作为数据依赖的提供者，任何其后代的组件，无论层级有多深，都可以注入由父组件提供给整条路径