《vue教程课件》_《vue教程课件》_4组件.docxVIP

Vue组件

Vue组件是Vue最重要的功能之一，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签，它是的实质是一个可以复用的Vue实例，具有相应的生命周期钩子函数等，使用组件的目的是为了减少重复代码的编写，提高开发效率，降低代码之间的耦合程度。

学习目标：

掌握组件的定义与使用

掌握组件通信

掌握插槽的使用

4.1组件的定义与使用

Vue中使用组件前必须将组件注册到应用中，根据组件的注册方式不同，Vue提供了三种注册方式，分别是全局注册和局部注册及打包工具注册。

4.1.1注册全局组件

全局注册是在新建实例时创建的，在项目的任意位置都可以使用组件，无须引入，注册全局组件的语法格式如下：

Vponent(tagName,options)

其中：

tagName:表示定义的组件名称。组件名称的定义格式既可以采用短横线分隔命名(kebab-case)，也可采用驼峰命名法(PascalCase)。当采用短横线分隔命名组件时，调用组件时也必须采用短横线分隔命名，而使用驼峰命名法时，调用组件时可以采用驼峰命名法或短横线分隔命名。

options:组件的选项对象，组件的主要内容，是一个复用的Vue实例。

示例4-1，全局组件

divid=app

!--引用全局组件--

my-counter/my-counter

/div