Vue.js 超详细入门与项目实战（微课视频版）课件 第06章 组件

第6章组件课件V1.0

教学内容第一节

什么是组件第二节组件使用第三节组件属性第四节组件事件知识目标教学目标理解和掌握定义组件的方法和流程理解组件中属性的定义和使用原理掌握组件中事件验证和传参的方法知识点预览#节知识点难点重点应用6C06-01什么是组件1、单文件组件

2、JavaScript对象C06-02组件使用1、全局注册2、局部注册3、组件命名格式C06-03组件属性1、属性定义2、属性验证3、属性值传递C06-04组件事件1、事件定义2、事件验证3、事件监听和传参 单文件组件简称为（SFC），它是指在使用脚手架构建项目时，自动生成的一个扩展名为.vue的单独文件，而在这个文件中，就是一个定义好的Vue组件。<template><div>{{tip}}</div></template><script>exportdefault{name:"Base",data(){return{tip:"今天的天气非常不错！"}}}</script>

单文件组件

在js文件中定义一个包含Vue特定选项的JavaScript对象，这也是定义了一个Vue组件。exportdefault{data(){return{tip:"今天的天气非常不错！"}},template:`<div>{{tip}}</div>`}

在上述js文件的代码中，定义的组件默认是使用exportdefault方法导出自己，模板是一个内联的JavaScript字符串变量，Vue在执行时会自动编译它，成为组件的模板部分。JavaScript对象

全局注册组件的方式非常简单，只需要调用Vue应用实例中的component()方法，就可以注册一个在当前Vue应用实例中都可以使用的全局组件，具体实现步骤如下：1、先定义一个名称为Global.vue，用于全局注册的组件2、在main.js文件中，调用component()方法将定义的组件注册为全局组件3、在任意一个组件，如App.vue中，直接调用注册成功的全局组件

在第2个步骤中，调用Vue应用实例化对象的component()方法时，需传入两个参数，第一个是指这个全局组件的名称，第二个是指这个全局组件所对应的目标组件，通常是已定义完成的组件。component()方法可以采用链式方式编写，注册多个全局组件。最后，各个被注册的全局组件之间也可以相互调用，因此，上述代码中的三个被注册的全局组件内部是可以相互访问的。全局注册

相比于全局注册的组件，局部组件必须在父组件中显式声明，组件间的依赖关系更加清晰，对打包文件的优化更加友好，注册方式也更加简单，只需要以下两个步骤。1、先定义一个名称为Local.vue，用于局部注册的组件2、在任意一个组件，如App.vue中，导入新建的组件，并使用components选项，声明导入的组件，完成局部组件注册的功能

此外，局部注册的组件只能在注册的父组件中使用，并不能运用到它的子组件或后代组件，即局部组件只对显式的注册有效，而对后代组件无效。局部组件在注册组件时，有下列二种命名格式。1、短横线分隔（kebab-case）ponent('custom-component-name',{/*...*/})2、首字母大写（PascalCase）ponent('CustomComponentName',{/*...*/})官方提倡使用首字母大写格式，因为它是一个合法的JavaScript标识符，可以很容易地导入和注册到组件中，将系统自带的Vue组件和自定义元素区分开。组件命名格式

组件属性的定义需要使用props选项来完成，选项的值可以是一个字符型数组，也可以是一个对象的形式。除了数组形式定义属性外，还可以使用对象的方式来定义组件的属性。官方建议使用对象的形式去定义一个组件的属性，因为这种形式定义组件属性时，对象中的key表示属性名称，属性值就是属性名声明类型的构造函数；此外，这种形式定义属性时，还可以设置该属性是否需要验证。属性定义

属性验证是指在声明组件属性时，如果属性不满足声明时定义的规则，将会在控制台输出相应的错误提示信息，这种验证功能有助于组件开发人员查看属性值传入的是否符合规范，进一步跟踪传入组件的数据。

属性验证

组件所有属性默认都是可选的，除非将属性的require选项设置为true，一个可选项的属性默认未传递的值是undefined，如果是布尔型，则默认为false。如果想强化未传递时的默认值，则可以在属性中添加default选项来设置。如果需要修改传入的属性值，则可以将该属性值保存到另外一个变量中，保存后，则可以任意操作这个保存的变量，以实现修改的功能。

组件的命名官方推荐使用首字母大写的格式，因为这种格式有利于提高模板的可读性，而组件属性的命名官方建议使用短横线分隔的格式，因为这样的格式更加贴近HTML元素书写的风格。属性值传递

如果需要给组件添加事件，可以使用emits选项进行显示声明。声明的方式有两种，一种是数组格式，一种是对象格式。

事件名官方推荐使用驼峰语法（camelCase）来声明，以便于在父组件调用时，可以使用短横线分隔格式监听组件的事件，父组件使用v-on或@来监听子组件的事件，如下所示。<template><myComponent@my-clk="fn"v-on:myFocus="fn2"></myComponent></template>事件定义

与验证属性相同，验证事件必须在组件定义时，以对象的形式来描述；在对象中，事件被赋值给一个函数，函数的参数作为执行事件时的实参，通过验证传入实参的有效性，来决定函数返回true或false，从而完成事件执行时合法性的验证。事件验证

组件事件的监听是指当子组件声