25vue学习——vue的组件的基础学习（定义组件）

25vue学习——vue的组件的基础学习（全局组件定义的三种方式）

前言

我们在上一篇文章中已经了解了 vue 组件的定义以及组件化和模块化的区别了。你肯定迫不及待的想要使用组件来完成你的项目了吧。那接下来就让我们来学习使用组件的第一步——定义组件的方式吧。

组件 和 过滤器 以及 指令一样，有全局和私有之分

1.全局组件定义的三种方式

（1）使用 Vue.extend 配合 Vue.component 方法：

（2）直接使用 Vue.component 方法：

（3）使用 Vue.component 配合 html 代码的方法：

2.私有组件组件定义的三种方式

（1）直接在 template 内部写 html 的结构

（2）使用 id 来调用在 vue 实例的控制区域外定义好的 html 结构

注意：

（1）在为组件命名的时候，我们可以采用驼峰式命名，但是在 html 中引用的时候就要把驼峰改为小写，两个单词用 - 来连接如果没有使用驼峰的话就直接用定义的名称引用即可
（2）template 的 html 结构对象中一定要有一个根元素且只能有一个