我们一直使用vm对象就是一个vue组件，vm是根组件，但是我们实际使用的组件却不是根组件。根组件更多是学习目的。

Vue组件

组件作为组件化开发的基础，帮助我们更好的协同开发和项目集成。

初识自定义组件

这里的组件是我们自定义的组件，最原始的写法。

    <div id="app">
        <div>{{msg}}</div>
        <juejin></juejin>
    </div>

        let vm = new Vue({
            el: '#app',
            data: {
                msg: '----',
            },
            components: {
                juejin: {
                    data() {
                        return {
                            text: '这是组件'
                        }
                    },
                    template: `<div>{{text}}</div>`,
                    methods: {}
                }
            }
        });

效果：

---

通过上面简单的组件写法，我们发现components属性里组件对象名就是组件标签名字，并且和根组建的组成几乎是一致，一样有data，methods。

但是我们还是发现了不同部分，data是一个匿名函数的返回值，形成闭包,这是为了复用组件时每个组件的data数据不是同一份；我们不再使用el属性而是template属性编写html结构，在vue单文件中template会直接写出来，后面写。

除了可以看见的部分，我们还需要注意：子组件只能被父组件使用，不可以跨代；组件只能使用自己的自定义指令。

为了和浏览器支持的html标签产生区别，官方建议组件名字采用大驼峰命名。

这里我建议大家实际敲一敲代码进行尝试，因为重复代码演示太冗余了我就自行测试没有展示出来。

全局组件

如果我想所有组件能都使用某个组件应该怎么办？Vue提供了api创建全局组件。Vue.component方法可以注册和查看全局组件。

        Vue.component("juejin",{
            data(){
                return {
                    text:'全局组件'
                }
            },
            template:`<div>{{text}}</div>`
        })

全局组件的特点也很明显，首先每次只能注册一个全局组件，其次第一个参数就是组件的名字，也就是组件标签的名字。

查看组件

并不常用，直接复制的官方展示代码：

// 获取注册的组件 (始终返回构造器) 
var MyComponent = Vue.component('my-component')

组件的创建我们通常叫作注册，注册了的组件可以在局部或全局使用，组件的对象即使编写了没有传入components或Vue.component中，也不能被当作组件使用，所以注册组件一词十分合理。

单文件组件

我认为单文件组件的设计是组件功能的极致体现，如果我混合在本文件讲解并不合理，我希望单独讲解和使用，下一篇文章将详细说明。这里就先贴个.vue文件预习一下吧：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

说完了组件的创建和关系，实际上组件间的通信又是一个重要知识点后续会讲解。