本公众号 的系列文章《跟热饭一起学习vue吧》，本文会采用非常土，非常low的语言，让读者学习并立即上手即可使用vue去写前端页面。简单生动，由浅入深。那么，就一起开始学习吧，体验一把又土又油腻的教程吧~

别忘了先打开我们的菜鸟编辑器当做草纸吧：右键左下角“阅读原文”在新窗口中打开链接，会打开在线编辑器。

组件 Component

提到组件，估计大家都大概知道是什么意思，就是一个能复用的模块。

那么在前端的vue里，这个组件是什么意思呢？

其实就是像一个小工厂一样，源源不断的生产出来指定的元素标签，让你插入到页面上。

主要是有俩部分：

1.注册（也就是声明，创建这个组件）

2.调用（也就是dom层中在你需要插入这个组件的时候，调用即可）

如何注册

在script里，找个地方，写上就行。

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
</script>

如上代码所示，调用vue.component 即可创建一个 组件，组件名叫runoob，这个是你随便起的。内部用大括号包裹，其中第一个属性template就是实际的dom元素标签内容了。代码中的就是个h1标题标签，内容是写死的文案：”自定义组件！“

如何调用

只需要在你希望的地方把你的组件名字 当成元素标签 写上即可实现插入，但是必须在vue的元素区域内：

<div id="app">
 <runoob></runoob>
</div>

完整示例

然后我们再来学习下局部组件

局部组件，就是说这个组件不能让你随便用了，必须在这个实力中调用才行，其他的vue构造器用不了，这个runoob（你自己取的名字）

简单解释下怎么写：

1.你在vue构造器外写个组件模板，注意这并不是组件，只是可以被组件调用的模板而已。

2.你再vue构造器中写个components属性，里面写个组件名字，并调用外面的那个组件模板

3.然后在dom中当前vue的作用范围内，可以用组件名字标签化了来插入具体的元素内容了。

好了本节课就到这里，怎么样，是不是感觉很简单？？？感觉简单的话，就立马关注下本公众号吧~ 进群学习请加v：qingwanjianhua