根组件

在let vm = new Vue({})中，我们得到的vm是一个Vue的一个对象（或者说是实例），它也可以理解为一个组件，只不过它是一切其它的组件的根组件。

示例-定义-使用子组件

有两种方法使用组件：

全局组件
局部组件

1.全局组件

通过Vue的静态方法component（）定义一个全局组件，这个方法中有一个属性，叫template。
全局组件在所有的vue实例中都可以使用。

<body>
    <div id="app">
        <my-head></my-head>
    </div>
</body>
<script>
    <!--第一个参数`my-head`就是组件的名字,-->
    <!--定义一个全局组件-->
    Vue.component("my-head",{
        template:"<div>我是头部</div>"
    });
    
    let vm = new Vue({
        el:"#app",
        data:{
        },
    }) 
</script>

我们很少使用全局组件，因为在一个页面中，我们只会设置一个vue实例。

2.局部组件
局部组件就是要去配置一下components这个选项。

格式

<div id="#app">
    <myhead></myhead>
</div>

<script>
let vm = new Vue({
    el:"#app",
    components:{
        "my-head":{
            templare:"<div>我是头部</div>"
        }
    }
})
</script>

组件使用的基本流程

第一步：定义——组件对象

组件对象就是一个普通的对象，只不过这个对象中有一个template属性。

<body>
    <div id="app">
    </div>
</body>
//定义组件对象
<script>
let abc = {
    template:"<div>这是一个组件</div>"
}
<script>

第二步：注册——给组件对象注册一个名字

使用components注册。

let app = new Vue({
        el:"#app",
        //二.注册组件
        components:{
            abc,
        }

第三步：使用

<div>
    <abc></abc>
</div>

完整的一个组件

<body>
    <div id="app">
        <!-- 使用组件 -->
        <my-collapse></my-collapse>
    </div>
    <template id="box">
        <div>
        <h1>这是一个小组件</h1>
        <p>{{info}}</p>
        </div>
    </template>
</body>

<script>
    //1.定义组件对象
   let MyCollapse = {
       template:"#box",
       //除了vm外，后面的子组件数据都是data函数，并且要return一个对象
       //数据放对象中
       data(){
           return{
               info:"hello worrld~"
           }
       }
   }
    let vm = new Vue({
        el:"#app",
        data:{
        },
        components:{
            //2.注册一个组件
            MyCollapse
        }
    }) 
</script>

组件的三个名字

定义组件对象的名字

这里的名字没有任何的要求。只要是一个合法的变量名即可。一般采用大驼峰命令法：如果有多个单词，则每个单词的首字母都要大小写。

注册组件时使用的名字

这里名字没有要求。一般与组件名保持一致：利用es6中的对象的属性名的简写规则，进行简写：

使用组件时用的名字

在使用组件时，它的名字只能是全小写！！！

组件中的加载项

与vm实例中的data语法不同：

组件中的data是一个函数，在其中写return { }。这是固定写法：

let 组件名 = {
   template:"",
   data:function(){
      return {
             //你的数据项
        }
    }
}

Vue中的组件

根组件