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

第6章组件;教学内容;知识目标;知识点预览; 单文件组件简称为（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在执行时会自动编译它，成为组件的模板部分。;全局注册组件的方式非常简单，只需要调用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选项来设置。

如果需要修改传入的属性值，则可以将该属性值保存到另外一个变量中，保存后，则可以任意操作这个保存的变量，以实现修改的功能。

组件的命名官方推荐使用首字母大写的格式，因为这种格式有利于提高模板的