Vue局部组件的定义

通过component配置项来定义局部组件

   <script>

        // 随着组件的配置项越来越多，那么VUE配置项的内容会非常多，
        //   推荐：把组件的配置以自变量的方式定义在外面
        let pageHeader = {
            template:'<div>页面的头部内容</div>'
        }

        let pageBody = {
            template:'<div>页面的主体内容</div>'
        }
        let pageFooter = {
            template:'<div>页面的底部内容</div>'
        }


        let vm = new Vue({
            el : "#app",
            data : {
                
            },
            // 通过component配置项来定义局部组件
            components:{
                //组件名:{组件配置项}
                pageHeader,
                pageBody,
                pageFooter
            }
        })
    </script>

调用方法仍然和全局的一样

    <div id="app">
        <page-header></page-header>
        <page-body></page-body>
        <page-footer></page-footer>
    </div>