Vue.js 3.x前端开发技术与实战 课件 第5章Vue.js组件开发.pptx

第5章-Vue.js组件开发(4学时)教学目标熟悉组件的命名规范。掌握全局、局部注册组件的方法。掌握组件间常用的通信方法。掌握插槽的分类和定义方法。1

5.1组件基础组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。组件也可以看作为自定义的HTML元素。可以使用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树，如图所示。5.1.1组件命名组件注册前必须给组件命名，组件名应该采用多个单词构成，以免与现有的或未来的HTML元素有冲突。由于所有的HTML元素名称都是由单个单词构成。Vue组件中通常采用kebab-case（短横线分隔式）或camelCase（驼峰式）命名方式。(1)kebab-case-命名法当使用kebab-case定义一个组件时，必须在引用自定义元素时使用kebab-case命名方式。Vueprops命名最好直接使用kebab-case命名。例如my-name、my-component-name等。

(2)camelCase命名法camelCase（也称为驼峰式）命名法就是当组件名称是由一个或多个单词构成时，第一个单词首字母以小写字母开始，从第二个单词开始以后的每个单词的首字母都采用大写字母。例如：myFirstName、myLastName、myComponent。注意，尽管如此，直接在DOM(即非字符串的模板)中使用时，只有kebab-case是有效的。（3)PascalCase(帕斯卡命名)与camelCase相比，PascalCase命名时，第一个单词的首字母是大写的；但camelCase命名时，第一个单词的首字母小写。当使用PascalCase命名法定义一个组件时，在引用自定义元素时两种命名法都可以使用。也就是说<my-component-name>和<MyComponentName>都是可接受的。因为HTML不区分大小写，所以不管是用Kebab-case还是camelCase命名的组件在写入HTML后都要改写为Kebab-case格式。5.1组件基础

5.1组件基础组件命名基本语法//在组件定义中components:{//使用kebab-case注册'kebab-cased-component':{/*...*/},//使用camelCase注册'camelCaseComponent':{/*...*/},//使用PascalCase注册'PascalCasedComponent':{/*...*/}}在HTML模板中，请使用kebab-case：<!--在HTML模板中始终使用kebab-case--><kebab-cased-component></kebab-cased-component><camel-cased-component></camel-cased-component><pascal-cased-component></pascal-cased-component>//组件中定义components:{'kebab-cased-component':{/*...*/},'camelCaseComponent':{/*...*/},'PascalCasedComponent':{/*...*/}}//在字符串模板中，可以采用以下格式引用constapp=Vue.createApp({})；ponent('MyCom',{template:`<div><kebab-cased-component></kebab-cased-component><camel-cased-component></camel-cased-component><camelCaseComponent></camelCaseComponent><pascal-cased-component></pascal-cased-component><pascalCasedComponent></pascalCasedComponent><PascalCasedComponent></PascalCasedComponent></div>`})

5.1.2组件注册组件注册通常分为全局注册和局部注册。全局组件适用于所有实例，局部组件仅供本实例使用。1.全局注册组件的定义【基本语法】//全局组件注册constapp=Vue.createApp({})ponent(